/* ============================================================
   GLIVVO ERP - CSS PRINCIPAL
   Tema claro: sidebar teal escura + conteúdo cinza claro
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap');

:root {
    /* CONTEÚDO: cinza claro */
    --bg-primary: #eef1f5;
    --bg-secondary: #e2e6ec;
    --bg-card: #ffffff;
    --bg-input: #f5f7fa;
    --bg-hover: #e8ebf0;

    /* SIDEBAR: azul oceano */
    --sidebar-bg: #0f3050;
    --sidebar-bg-mid: #0c2a48;
    --sidebar-bg-end: #09233e;
    --sidebar-border: rgba(255,255,255,0.07);
    --sidebar-text: rgba(255,255,255,0.6);
    --sidebar-text-active: #ffffff;
    --sidebar-hover: rgba(255,255,255,0.07);
    --sidebar-accent: #56d4be;

    /* TEXTO: escuro e legível */
    --text-primary: #1a1a2e;
    --text-secondary: #374151;
    --text-muted: #6b7280;

    /* CORES DE DESTAQUE */
    --accent: #007A99;
    --accent-hover: #006080;
    --green: #16a34a;
    --red: #dc2626;
    --yellow: #d97706;
    --orange: #FF6F00;
    --purple: #FF6F00;
    /* Faróis de cobrança (Cobranças v2) — laranja próprio; o --orange de brand
       (#FF6F00) é claro demais pra escalar entre amarelo e vermelho no farol. */
    --farol-laranja: #ea580c;
    --farol-laranja-soft: #ffedd5;
    /* Amarelo REAL do farol (pedido Samuel 17/07): o --yellow global (#d97706)
       e ambar-escuro e lia como laranja fraco na escala do farol. */
    --farol-amarelo: #eab308;

    /* CANAIS / BRAND COLORS */
    --whatsapp: #25d366;
    --whatsapp-hover: #1da851;

    /* BORDAS */
    --border: #d1d5db;
    --border-light: #e5e7eb;

    /* LAYOUT */
    --sidebar-width: 268px;
    --header-height: 56px;

    /* PDV (tema verde teal — editar_venda/pedido) */
    --pdv-teal: #0f766e;              /* teal principal (botoes, badges ativos) */
    --pdv-teal-hover: #0b5a54;        /* teal hover (botoes) */
    --pdv-teal-dark: #0b3c37;         /* teal escuro (textos/bordas) */
    --pdv-teal-soft: #ccfbf1;         /* teal bem claro (selecao, hover suave) */
    --pdv-teal-softer: #f0fdfa;       /* teal quase branco (background hover) */
    --pdv-teal-border: #99f6e4;       /* teal medio (bordas de selecao) */
    --pdv-bg-page: #f9fafb;           /* fundo geral da area do pedido */
    --pdv-bg-card: #ffffff;           /* cards/itens */
    --pdv-bg-input: #f8fafc;          /* input background */
    --pdv-text: #0f172a;              /* texto principal */
    --pdv-text-muted: #64748b;        /* texto secundario */
    --pdv-border: #e2e8f0;            /* bordas cinzas */
    --pdv-border-hover: #94a3b8;      /* bordas hover */

    /* Sombras tokenizadas */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);

    /* IA (lilás) */
    --ia-purple: #7c3aed;
    --ia-purple-soft: rgba(124,58,237,0.12);
    --ia-purple-text: #6d28d9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.011em;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04', 'ss01', 'ss03', 'tnum';
    font-optical-sizing: auto;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ============================================================
   SIDEBAR v2 — Glivvo Refinado
   ============================================================ */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-mid) 60%, var(--sidebar-bg-end) 100%);
    display: flex; flex-direction: column; flex-shrink: 0;
    position: fixed; left: 0; top: 0; bottom: 0;
    z-index: 100;
    box-shadow: 2px 0 16px rgba(0,0,0,0.12);
    transition: transform 0.3s;
}

/* -- Brand -- */
.sidebar-brand {
    padding: 24px 18px 20px;
    display: flex; align-items: center; gap: 14px;
    border-bottom: 1px solid var(--sidebar-border);
}
.brand-logo {
    width: 46px; height: 46px; border-radius: 12px;
    background: #1a5c5a; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 21px; letter-spacing: -0.5px; flex-shrink: 0;
}
.brand-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-name {
    font-size: 24px; font-weight: 800; color: #ffffff;
    letter-spacing: -0.8px; line-height: 1;
}
.brand-name .v-orange { color: #f59e0b; }
.brand-type {
    font-size: 10px; color: rgba(255,255,255,0.4); font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; margin-top: 1px;
}
.brand-location {
    font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 600;
    letter-spacing: 0.2px; margin-top: 2px;
}

/* -- Navigation -- */
.sidebar-nav {
    flex: 1; overflow-y: auto; padding: 6px 0 12px;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.section-label {
    padding: 18px 22px 7px;
    font-size: 10.5px; font-weight: 600;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.8px; text-transform: uppercase;
}
.section-label:first-child { padding-top: 10px; }

.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 14px 9px 18px; margin: 1px 10px;
    border-radius: 8px; cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13.5px; font-weight: 500;
    color: rgba(255,255,255,0.82);
    text-decoration: none; position: relative;
    letter-spacing: 0.01em;
}
.nav-item:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.92);
}
.nav-item:hover svg { opacity: 0.8; }

/* Active state */
.nav-item.active {
    background: rgba(86,212,190,0.13);
    color: #ffffff; font-weight: 600;
}
.nav-item.active::before {
    content: ''; position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 4px 4px 0;
    background: var(--sidebar-accent);
    box-shadow: 0 0 10px rgba(86,212,190,0.4);
}
.nav-item svg {
    width: 18px; height: 18px; flex-shrink: 0;
    opacity: 0.7; stroke-width: 1.7;
    transition: opacity 0.15s ease;
}
.nav-item.active svg {
    opacity: 1; color: var(--sidebar-accent);
    filter: drop-shadow(0 0 3px rgba(86,212,190,0.25));
}
.nav-item .icon { font-size: 18px; width: 22px; text-align: center; }

@keyframes badgePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.85;transform:scale(1.1)} }
.badge-neon {
    background: #F97316; color: #FFFFFF;
    font-size: 12px; font-weight: 800;
    padding: 2px 8px; border-radius: 10px;
    margin-left: auto; line-height: 1.4;
    box-shadow: 0 0 8px rgba(249,115,22,0.5), 0 0 16px rgba(249,115,22,0.2);
    animation: badgePulse 2s infinite;
}

/* -- User footer -- */
.sidebar-footer {
    border-top: 1px solid var(--sidebar-border);
    padding: 14px 14px 10px;
}
.user-bar {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px;
    cursor: pointer; transition: background 0.15s ease;
}
.user-bar:hover { background: rgba(255,255,255,0.06); }
.user-pic {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(86,212,190,0.16); color: var(--sidebar-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    border: 1px solid rgba(86,212,190,0.12);
}
.user-details { flex: 1; min-width: 0; }
.user-details .name {
    font-size: 13px; font-weight: 600;
    color: rgba(255,255,255,0.92); letter-spacing: 0.01em;
}
.user-details .role {
    font-size: 11px; color: rgba(255,255,255,0.38);
    font-weight: 400; margin-top: 1px;
}
.chevron-icon { color: rgba(255,255,255,0.25); }

/* -- Action buttons -- */
.sidebar-actions {
    padding: 2px 14px 16px; display: flex; gap: 8px;
}
.action-btn {
    flex: 1; padding: 8px 0; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    font-family: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 0.15s ease;
    display: flex; align-items: center; justify-content: center;
    gap: 6px; letter-spacing: 0.01em; text-decoration: none;
}
.action-btn:hover {
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
}
.action-btn.danger:hover {
    border-color: rgba(248,113,113,0.35);
    color: #fb7185;
    background: rgba(248,113,113,0.1);
}

/* Compat: old classes */
.user-info { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.user-info .avatar {
    width: 32px; height: 32px; background: var(--sidebar-accent); border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: white;
}
.user-info .name { font-size: 13px; font-weight: 500; color: #e2e8f0; }
.user-info .role { font-size: 11px; color: #64748b; }

/* ============================================================
   MAIN CONTENT (cinza claro)
   ============================================================ */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 24px 28px;
    background: var(--bg-primary);
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}

.page-header h1 {
    font-size: 22px; font-weight: 700; color: var(--text-primary);
}

.page-header .actions { display: flex; gap: 10px; align-items: center; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    border: none; cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-success { background: var(--green); color: white; }
.btn-success:hover { background: #15803d; }
.btn-danger { background: var(--red); color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-warning { background: var(--yellow); color: white; }
.btn-outline {
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--bg-hover); }
.btn-outline.btn-outline--danger { color: var(--red); border-color: var(--red); }
.btn-outline.btn-outline--danger:hover { background: rgba(220,38,38,.08); color: var(--red); }
.btn-outline.btn-outline--whatsapp { color: var(--whatsapp); border-color: var(--whatsapp); }
.btn-outline.btn-outline--whatsapp:hover { background: rgba(37,211,102,.08); color: var(--whatsapp); }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.btn-group { display: flex; gap: 0; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: 8px 0 0 8px; }
.btn-group .btn:last-child { border-radius: 0 8px 8px 0; }

/* ============================================================
   TABS
   ============================================================ */
.tabs {
    display: flex; gap: 0; border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
}

.tab {
    padding: 10px 20px; font-size: 13.5px; font-weight: 500;
    color: var(--text-muted); cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all 0.15s;
    position: relative;
}

.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

.tab .badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--red); color: white;
    font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px;
    border-radius: 9px; padding: 0 5px;
    margin-left: 6px;
}

/* ============================================================
   DATA TABLE
   ============================================================ */
.data-table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.data-table thead th {
    padding: 13px 16px; text-align: left;
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: #374151;
    background: #e8ecf1;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap; cursor: pointer;
    user-select: none;
}

.data-table thead th:hover { color: var(--accent); background: #dce3ec; }

.data-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.12s;
}

.data-table tbody tr:nth-child(even) { background: #f8fafc; }
.data-table tbody tr:nth-child(odd) { background: #ffffff; }
.data-table tbody tr:hover { background: #e0eaff !important; }

.data-table tbody td {
    padding: 11px 16px; font-size: 13.5px;
    color: #1e293b;
    vertical-align: middle;
    line-height: 1.4;
}

.data-table .col-action { width: 90px; text-align: center; }
.data-table .col-number { text-align: right; }
.data-table .col-center { text-align: center; }

.text-red { color: #dc2626 !important; font-weight: 700; }
.text-green { color: #16a34a !important; font-weight: 700; }
.text-yellow { color: #ca8a04 !important; font-weight: 600; }
.text-blue { color: var(--accent) !important; }
.text-muted { color: var(--text-muted) !important; }
.font-bold { font-weight: 700 !important; }
.font-mono { font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; letter-spacing: .3px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--bg-card);
    border-radius: 12px; border: 1px solid var(--border-light);
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}

.card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.stat-card .label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.stat-card .value { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.stat-card .sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px; margin-bottom: 24px;
}

/* ============================================================
   FORMS / INPUTS
   ============================================================ */
.form-group { margin-bottom: 14px; }

.form-group label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--text-muted); margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: 0.5px;
}

input, select, textarea {
    width: 100%; padding: 9px 12px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-primary);
    font-size: 13.5px; font-family: inherit;
    transition: border-color 0.15s;
}

input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

input::placeholder { color: var(--text-muted); }
textarea { resize: vertical; min-height: 80px; }
select { cursor: pointer; }

.input-icon { position: relative; }
.input-icon input { padding-left: 36px; }
.input-icon .icon {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted); font-size: 16px;
}

/* Input readonly/disabled — visual unificado em vez de inline style */
.input-readonly { opacity: .7; cursor: not-allowed; }

.search-bar {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 16px;
}

.search-bar input { max-width: 400px; }

.checkbox-wrapper {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--accent);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    display: none; justify-content: center; align-items: center;
    z-index: 1000;
}

.modal-overlay.show { display: flex; }

.modal {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    width: 90%; max-width: 700px;
    max-height: 85vh; overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
}

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}

.modal-header h2 { font-size: 17px; font-weight: 600; color: var(--text-primary); }

.modal-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-hover); border-radius: 8px;
    cursor: pointer; color: var(--text-muted);
    border: none; font-size: 18px;
}

.modal-close:hover { background: var(--red); color: white; }

.modal-body { padding: 24px; }
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    display: flex; justify-content: flex-end; gap: 10px;
}

/* Modal de erro (expedição) */
.modal-error { background: var(--red); border: 3px solid #b91c1c; }
.modal-error .modal-header { border-bottom-color: rgba(255,255,255,0.2); }
.modal-error h2, .modal-error p { color: white; }
.modal-error .error-icon { font-size: 80px; text-align: center; color: white; margin-bottom: 16px; }
.modal-error .error-msg { font-size: 22px; font-weight: 700; text-align: center; color: white; margin-bottom: 24px; }

/* ============================================================
   PAYMENT MODAL
   ============================================================ */
.payment-row {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 10px;
    padding: 10px; background: var(--bg-input);
    border-radius: 8px; border: 1px solid var(--border-light);
}

.payment-row select { max-width: 200px; }
.payment-row input { max-width: 160px; }

.payment-total {
    font-size: 24px; font-weight: 700;
    text-align: right; padding: 16px 0;
    border-top: 2px solid var(--border);
    color: var(--text-primary);
}

/* ============================================================
   VENDA EDITOR
   ============================================================ */
.venda-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px; height: calc(100vh - 120px); overflow: hidden;
}

.venda-main { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.venda-main > h2 { flex-shrink: 0; }
.pedido-scroll-area { flex: 1; overflow-y: auto; min-height: 0; }

.venda-sidebar {
    background: var(--pdv-bg-card);
    border-left: 1px solid var(--pdv-border);
    padding: 20px; overflow-y: auto; min-height: 0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 60, 55, 0.06);
}

.venda-footer {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 0; flex-shrink: 0;
    border-top: 2px solid var(--pdv-border); background: var(--pdv-bg-page);
}
.venda-footer .venda-total { margin-left: auto; }

/* Override local: Salvar/Finalizar no footer do PDV usa teal (sem tocar --accent global) */
.venda-footer .btn-primary {
    background: var(--pdv-teal);
}
.venda-footer .btn-primary:hover {
    background: var(--pdv-teal-hover);
}

.venda-total { font-size: 28px; font-weight: 700; color: var(--pdv-text); }

/* ── Search area (Novo Pedido) ── */
.pedido-search-area {
    background: var(--pdv-bg-card);
    border: 2px solid var(--pdv-border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(15, 60, 55, 0.06);
}
.pedido-search-area:focus-within {
    border-color: var(--pdv-teal);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, .1), 0 2px 8px rgba(15, 60, 55, 0.06);
}
.pedido-search-input {
    font-size: 16px !important;
    padding: 14px 18px !important;
    font-weight: 500 !important;
    background: var(--pdv-bg-input) !important;
    border: 2px solid var(--pdv-border) !important;
    border-radius: 10px !important;
    color: var(--pdv-text) !important;
    letter-spacing: .2px;
}
.pedido-search-input:focus {
    background: #ffffff !important;
    border-color: var(--pdv-teal) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .15) !important;
}
.pedido-search-input::placeholder { color: #94a3b8 !important; font-weight: 400 !important; }
.pedido-search-filters { display: none; /* Oculto — cascata inteligente substitui os filtros manuais */ }
.pedido-search-filters select {
    font-size: 13px !important; padding: 8px 12px !important;
    border-radius: 8px !important; background: #f1f5f9 !important;
    border: 1px solid var(--pdv-border) !important; color: #475569 !important;
    font-weight: 500 !important;
}

/* ── Search results ── */
.search-result-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; margin-bottom: 4px;
    background: var(--pdv-bg-card); border-radius: 10px;
    border: 1px solid var(--pdv-border);
    cursor: pointer; transition: all .15s;
    position: relative;
}
.search-result-item:hover {
    background: var(--pdv-teal-softer); border-color: var(--pdv-teal-border);
    box-shadow: 0 2px 8px rgba(15, 118, 110, .1);
    transform: translateY(-1px);
}
.search-result-item .sr-img {
    width: 44px; height: 44px; min-width: 44px;
    background: #f1f5f9; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.search-result-item .sr-img img { width: 100%; height: 100%; object-fit: cover; }
.search-result-item .sr-info { flex: 1; min-width: 0; }
.search-result-item .sr-name { font-size: 14px; font-weight: 600; color: var(--pdv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item .sr-meta { font-size: 12px; color: var(--pdv-text-muted); margin-top: 2px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-result-item .sr-code { font-family: 'SF Mono', 'Consolas', monospace; background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #475569; }
.search-result-item .sr-stock { font-weight: 700; }
.search-result-item .sr-stock.low { color: #dc2626; }
.search-result-item .sr-stock.medium { color: #d97706; }
.search-result-item .sr-stock.ok { color: var(--pdv-teal); }
.search-result-item .sr-price { font-size: 15px; font-weight: 800; color: var(--pdv-text); white-space: nowrap; min-width: 90px; text-align: right; }
.search-result-item .sr-add-badge { position: absolute; top: -6px; right: -6px; background: var(--pdv-teal); color: white; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; display: none; }
.search-result-item.already-in-cart .sr-add-badge { display: block; }
.search-result-item.already-in-cart { border-color: var(--pdv-teal-border); background: var(--pdv-teal-softer); }

/* ── Cart section ── */
.cart-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; margin-bottom: 8px;
    border-bottom: 2px solid var(--pdv-border);
}
.cart-section-header h4 {
    margin: 0; font-size: 15px; font-weight: 700; color: var(--pdv-text);
}
.cart-badge {
    background: var(--pdv-teal); color: white;
    padding: 3px 10px; border-radius: 12px;
    font-size: 12px; font-weight: 700;
}
.cart-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; margin-bottom: 6px;
    background: var(--pdv-bg-card); border-radius: 10px;
    border: 1px solid var(--pdv-border);
    position: relative;
    transition: background .1s;
}
.cart-item:hover { background: var(--pdv-teal-softer); }
.cart-item:nth-child(even) { background: #fafbfd; }
.cart-item:nth-child(even):hover { background: var(--pdv-teal-softer); }

.cart-item .item-img {
    width: 48px; height: 48px; min-width: 48px;
    background: #f1f5f9; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}

.cart-item .item-img img { width: 100%; height: 100%; object-fit: cover; }

.cart-item .item-info { flex: 1; min-width: 0; }
.cart-item .item-name { font-size: 14px; font-weight: 600; color: var(--pdv-text); line-height: 1.3; }
.cart-item .item-code { font-size: 12px; color: var(--pdv-text-muted); margin-top: 2px; }
.cart-item .item-price { font-size: 15px; font-weight: 800; text-align: right; color: var(--pdv-text); white-space: nowrap; }

.cart-item .item-remove {
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px;
    background: #ef4444; color: white;
    border-radius: 50%; border: none;
    font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
}

.cart-item:hover .item-remove { opacity: 1; }
.cart-item .item-remove .material-icons-round { font-size: 14px; line-height: 1; }

/* Compat: novas classes compartilhadas cart-item (PDV + WA) */
.cart-item[data-garantia] {
    border-left: 4px solid #dc2626;
    background: rgba(220,38,38,0.04);
}
.cart-item .item-garantia-pill {
    display: inline-block;
    font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
    background: #dc2626; color: #fff;
    padding: 2px 8px; border-radius: 6px;
    margin-left: 6px;
    vertical-align: middle;
}
.cart-item .item-code-pill {
    font-family: 'SF Mono', 'Consolas', monospace;
    background: #f1f5f9; color: #475569;
    padding: 1px 6px; border-radius: 4px;
    font-weight: 600;
}
.cart-item .item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cart-item .item-qty-unit { color: var(--pdv-text-muted); }
.cart-item .item-actions { display: flex; align-items: center; gap: 6px; }
.cart-item .item-action-btn {
    width: 34px; height: 34px;
    background: #fff;
    border: 1px solid var(--pdv-border);
    border-radius: 8px;
    color: var(--pdv-text); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    transition: border-color .12s, background .12s;
}
.cart-item .item-action-btn:hover { border-color: var(--pdv-teal); }
.cart-item .item-action-btn.is-active {
    background: #dc2626; border-color: #b91c1c; color: #fff;
}

/* ============================================================
   EXPEDIÇÃO
   ============================================================ */
.scanner-input {
    font-size: 28px !important;
    padding: 18px 24px !important;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 700;
    border: 3px solid var(--accent) !important;
    min-height: 60px;
}

.scanner-input:focus {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2);
}

.separar-list, .separado-list {
    border: 2px solid var(--border);
    border-radius: 10px; overflow: hidden;
    min-height: 30vh; max-height: 50vh; overflow-y: auto;
}

.separar-item, .separado-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px; font-size: 17px;
    border-bottom: 1px solid var(--border-light);
}
.separar-item .font-bold, .separado-item .font-bold {
    font-size: 17px; font-weight: 700;
}
.separar-item .sep-qtd, .separado-item .sep-qtd {
    font-size: 20px; font-weight: 700; white-space: nowrap;
}
.separado-item .sep-qtd { color: var(--green); margin: 0 10px; }
@media (max-width: 640px) { .separado-item { flex-wrap: wrap; } }

.separar-item:last-child, .separado-item:last-child { border-bottom: none; }
.separado-item { background: rgba(22, 163, 74, 0.06); }

/* ============================================================
   TRANSFERÊNCIA
   ============================================================ */
.transfer-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px; padding: 16px;
    margin-bottom: 12px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.transfer-card.delayed {
    border-color: var(--yellow);
    background: rgba(217, 119, 6, 0.04);
}

.transfer-timer { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.transfer-timer.expired { color: var(--red); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
    display: flex; justify-content: center; gap: 6px;
    margin-top: 20px;
}

.pagination a, .pagination span {
    padding: 6px 12px; border-radius: 6px;
    font-size: 13px; border: 1px solid var(--border);
    color: var(--text-secondary); background: var(--bg-card);
}

.pagination a:hover { background: var(--bg-hover); }
.pagination .active { background: var(--accent); color: white; border-color: var(--accent); }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
    position: fixed; top: 20px; right: 20px;
    z-index: 9999; display: flex; flex-direction: column; gap: 8px;
}

.toast {
    padding: 14px 20px; border-radius: 12px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    animation: slideIn 0.3s ease;
    max-width: 420px;
    display: flex; align-items: center; gap: 6px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
}

.toast-success { background: var(--green); color: white; }
.toast-error { background: var(--red); color: white; }
.toast-info { background: var(--accent); color: white; }
.toast-warning { background: var(--yellow); color: white; }

@keyframes slideIn {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash { padding: 12px 20px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
.flash-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.flash-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #003D4D 0%, #00404F 50%, #002B38 100%);
}

.login-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 20px; padding: 48px;
    width: 100%; max-width: 420px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
}

.login-card .logo {
    text-align: center; margin-bottom: 32px;
}

.login-card .logo h1 {
    font-size: 24px; font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-card .logo p {
    font-size: 13px; color: var(--text-muted); margin-top: 6px;
}

/* ============================================================
   DROPDOWN MENU (3 Pontinhos)
   ============================================================ */
.dropdown { position: relative; display: inline-block; }

.dropdown-trigger {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted); border-radius: 6px;
    font-size: 16px;
}

.dropdown-trigger:hover { background: var(--bg-hover); color: var(--text-primary); }

.dropdown-menu {
    position: absolute; right: 0; top: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px; min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: none; z-index: 200;
}

.dropdown-menu.show { display: block; }

.dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 6px;
    font-size: 13px; color: var(--text-secondary);
    cursor: pointer; white-space: nowrap;
}

.dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ============================================================
   DROPDOWN ACOES (Tabela de Produtos)
   ============================================================ */
.dropdown-acoes { position: relative; display: inline-block; }
.dropdown-acoes .dropdown-toggle { cursor: pointer; font-size: 12px; }
.dropdown-acoes .dropdown-menu {
    position: absolute; right: 0; top: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 6px; min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: none; z-index: 300;
}
.dropdown-acoes.open .dropdown-menu { display: block; }
.dropdown-acoes .dropdown-menu a {
    display: block; padding: 8px 12px; border-radius: 6px;
    font-size: 13px; color: var(--text-secondary);
    cursor: pointer; white-space: nowrap;
}
.dropdown-acoes .dropdown-menu a:hover { background: var(--bg-hover); color: var(--text-primary); }
.dropdown-acoes .dropdown-menu a.text-red { color: var(--red); }
.dropdown-acoes .dropdown-menu a.text-red:hover { background: rgba(220,38,38,0.06); }
.dropdown-acoes .dropdown-menu .dropdown-group-label {
    display: block; padding: 6px 12px 2px;
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .5px;
    pointer-events: none;
}
.dropdown-acoes .dropdown-menu .dropdown-separator {
    height: 1px; background: var(--border-light); margin: 6px 4px;
}
.dropdown-acoes .dropdown-menu a .material-icons-round {
    font-size: 16px; vertical-align: middle; margin-right: 8px;
    color: inherit;
}

/* ============================================================
   INPUT PREFIX / SUFFIX
   ============================================================ */
.input-prefix,
.input-suffix {
    display: flex; align-items: center;
    border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; background: var(--bg-card);
}
.input-prefix span,
.input-suffix span {
    padding: 8px 10px; font-size: 13px; font-weight: 600;
    color: var(--text-muted); background: var(--bg-input);
    white-space: nowrap; border: none;
}
.input-prefix input,
.input-suffix input {
    flex: 1; border: none !important; border-radius: 0 !important;
    background: transparent !important; padding: 8px 10px; min-width: 0;
}
.input-prefix input:focus,
.input-suffix input:focus { outline: none; box-shadow: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .venda-layout { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 120px); overflow: visible; }
    .pedido-scroll-area { overflow: visible; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mt-4 { margin-top: 16px; }
.p-4 { padding: 16px; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sm { font-size: 12px; }
.hidden { display: none !important; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.inp-sfx { display:flex;align-items:center;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--bg-card) }
.inp-sfx input { border:none;outline:none;padding:6px 8px;flex:1;font-size:12px;background:transparent;color:var(--text-primary);width:100%;min-width:0 }
.inp-sfx span { padding:6px 8px;font-size:11px;color:var(--text-muted);background:var(--bg-input);border-left:1px solid var(--border);white-space:nowrap }

/* ============================================================
   SISTEMA DE MENSAGENS PROFISSIONAL (padrão expedição)
   ============================================================ */
#sysMsgOverlay { z-index: 10001; }
#sysMsgModal {
    animation: msgPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 16px;
}
@keyframes msgPop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* Botão principal — fundo branco, texto na cor do modal (igual expedição) */
.sysMsg-btn {
    background: white;
    color: var(--red); /* sobrescrito inline por JS com a cor do tema */
    border: none;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-width: 130px;
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sysMsg-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.sysMsg-btn:active { transform: scale(0.97); }
/* Botão ghost — para "Cancelar" no showConfirm */
.sysMsg-btn-ghost {
    background: rgba(255,255,255,0.15);
    color: white !important;
    box-shadow: none;
    border: 2px solid rgba(255,255,255,0.4);
}
.sysMsg-btn-ghost:hover {
    background: rgba(255,255,255,0.25);
    box-shadow: none;
}

/* ============================================================
   ADMIN FOOTER
   ============================================================ */
.admin-footer {
    background: linear-gradient(180deg, #f0f2f6 0%, #e2e6ec 100%);
    border-top: 2px solid #d1d5db;
    margin-top: 60px;
    padding: 40px 32px 32px;
    text-align: center;
}
.admin-footer-inner {
    max-width: 800px;
    margin: 0 auto;
}
.admin-footer-brand {
    font-size: 20px;
    font-weight: 800;
    color: #00404F;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
}
.admin-footer-brand span {
    color: var(--accent, #007A99);
    margin: 0 4px;
}
.admin-footer-line {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.8;
}
.admin-footer-line strong {
    color: #374151;
    font-weight: 700;
}

/* ============================================================
   BUSCA INTELIGENTE EM CASCATA — Cards de subcategoria (Novo Pedido)
   Tema claro teal
   ============================================================ */
.cascade-pedido {
    background: var(--pdv-bg-card);
    border: 1px solid var(--pdv-border);
    border-radius: 14px;
    padding: 28px 20px 20px;
    text-align: center;
}
.cascade-pedido-header {
    margin-bottom: 20px;
}
.cascade-pedido-header .cascade-pedido-icon {
    font-size: 40px;
    color: var(--pdv-teal);
    opacity: .8;
    display: block;
    margin-bottom: 6px;
}
.cascade-pedido-header .cascade-pedido-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--pdv-text);
    margin: 0 0 6px;
}
.cascade-pedido-header .cascade-pedido-subtitle {
    font-size: 13px;
    color: var(--pdv-text-muted);
    margin: 0 0 2px;
}
.cascade-pedido-header .cascade-pedido-subtitle strong {
    color: var(--pdv-teal);
}
.cascade-pedido-header .cascade-pedido-info {
    font-size: 11px;
    color: var(--pdv-text-muted);
    opacity: .8;
}
.cascade-pedido-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    max-width: 640px;
    margin: 0 auto 16px;
}
.cascade-pedido-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px;
    background: var(--pdv-bg-page);
    border: 1px solid var(--pdv-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.cascade-pedido-card:hover {
    border-color: var(--pdv-teal);
    background: var(--pdv-teal-softer);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 118, 110, .12);
}
.cascade-pedido-card .material-icons-round {
    font-size: 28px;
    color: var(--pdv-teal);
}
.cascade-pedido-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--pdv-text);
    line-height: 1.2;
}
.cascade-pedido-card-count {
    font-size: 11px;
    color: var(--pdv-text-muted);
    font-weight: 500;
}
.cascade-pedido-vertodos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--pdv-border);
    color: var(--pdv-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
}
.cascade-pedido-vertodos:hover {
    border-color: var(--pdv-teal);
    color: var(--pdv-teal);
    background: var(--pdv-teal-softer);
}
/* Botao "voltar para marcas" (funil nivel 1) */
.cascade-pedido-card-marca {
    font-weight: 700;
}
.cascade-pedido-card-marca .cascade-pedido-card-name {
    font-weight: 800;
}

/* ============================================================
   GRID DE PRODUTOS — Tema claro teal (Novo Pedido)
   ============================================================ */
.pedido-prod-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--pdv-bg-page);
    border: 1px solid var(--pdv-border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--pdv-text-muted);
}
.pedido-prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    background: var(--pdv-bg-page);
    border: 1px solid var(--pdv-border);
    border-top: none;
    padding: 12px 14px 16px;
    border-radius: 0 0 14px 14px;
}
.pedido-prod-card {
    background: var(--pdv-bg-card);
    border: 1px solid var(--pdv-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    display: flex;
    flex-direction: column;        /* imagem em cima, info esticando para fundo */
}
.pedido-prod-card:hover {
    transform: translateY(-3px);
    border-color: var(--pdv-teal-border);
    box-shadow: 0 10px 28px rgba(15, 118, 110, .15);
}
.pedido-prod-card.in-cart {
    border-color: var(--pdv-teal);
}
.pedido-prod-card.out-of-stock {
    opacity: .5;
    cursor: default;
    border-color: #ef4444;
}
.pedido-prod-card.out-of-stock:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.pedido-prod-cart-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--pdv-teal);
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 2;
    letter-spacing: .3px;
}
.pedido-prod-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #ffffff;
    display: block;
}
.pedido-prod-img-placeholder {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pdv-bg-input);
    color: var(--pdv-text-muted);
    font-size: 32px;
}
.pedido-prod-img-placeholder .material-icons-round {
    font-size: 36px;
}
.pedido-prod-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;                /* preenche altura do card -> botao desce */
}
.pedido-prod-code {
    font-size: 11px;
    color: var(--pdv-text-muted);
    font-weight: 500;
}
.pedido-prod-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pdv-text);
    margin: 3px 0 6px;
    line-height: 1.3;
    word-break: break-word;
    /* Reserva 4 linhas (uniforme) e trunca alem disso com elipse */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(13px * 1.3 * 4);  /* 4 linhas * line-height * font-size */
}
.pedido-prod-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--badge-bg, #d97706);
    background: rgba(245,158,11,.14);  /* fallback antes de color-mix */
    background: color-mix(in srgb, var(--badge-bg, #d97706) 14%, transparent);
    padding: 4px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
}
.pedido-prod-stock {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 2px;
}
.pedido-prod-stock.ok { color: var(--pdv-teal); }
.pedido-prod-stock.low { color: #ef4444; }
.pedido-prod-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--pdv-teal-dark);
    font-family: 'Outfit', sans-serif;
}
.pedido-prod-btn {
    width: 100%;
    margin-top: auto;              /* sempre cola no fundo do card */
    padding: 9px;
    background: var(--pdv-teal);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: background .2s;
}
.pedido-prod-btn:hover {
    background: var(--pdv-teal-hover);
}
.pedido-prod-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    background: var(--pdv-bg-card);
    border: 1px solid var(--pdv-border);
    border-radius: 14px;
    color: var(--pdv-text-muted);
    font-size: 14px;
    text-align: center;
}

.input-invalid { border-color: #d14343 !important; background: #fff5f5; }

/* ====================================================================
   GLIVVO SWITCH — toggle on/off para decisoes de "ligar/desligar"
   ==================================================================== */
.glivvo-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;vertical-align:middle}
.glivvo-switch input{opacity:0;width:0;height:0;position:absolute}
.glivvo-switch-slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:24px;transition:background .2s ease}
.glivvo-switch-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:var(--bg-card);border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.glivvo-switch input:checked + .glivvo-switch-slider{background:var(--green)}
.glivvo-switch input:checked + .glivvo-switch-slider:before{transform:translateX(20px)}
.glivvo-switch input:focus-visible + .glivvo-switch-slider{outline:2px solid var(--accent);outline-offset:2px}
.glivvo-switch input:disabled + .glivvo-switch-slider{opacity:.5;cursor:not-allowed}

.switch-row{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:10px;transition:border-color .15s ease}
.switch-row:hover{border-color:var(--border)}
.switch-row.is-on{background:rgba(22,163,74,.04);border-color:rgba(22,163,74,.25)}
.switch-row label{cursor:pointer}
.switch-row .switch-title{font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.3}
.switch-row .switch-help{font-size:12px;color:var(--text-muted);margin-top:3px;line-height:1.4}
.switch-row .switch-status{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:10px;margin-left:8px;background:var(--bg-input);color:var(--text-muted)}
.switch-row.is-on .switch-status{background:var(--green);color:#fff}

/* ====================================================================
   PREVIEW PILL — valor mascarado (token, CSC, certificado)
   ==================================================================== */
.preview-pill{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 10px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.2);border-radius:6px;font-size:12px;color:var(--text-secondary);max-width:100%;line-height:1.4}
.preview-pill .material-icons-round{font-size:14px;color:var(--green);flex-shrink:0}
.preview-pill .preview-label{font-weight:600;color:var(--text-muted)}
.preview-pill .preview-value{font-family:'SF Mono',Menlo,Consolas,monospace;font-weight:600;color:var(--text-primary);letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ====================================================================
   CHOICE CARDS — 2 opcoes lado a lado (decisao binaria visual)
   ==================================================================== */
.choice-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.choice-card{position:relative;padding:18px 16px;background:var(--bg-card);border:2px solid var(--border-light);border-radius:12px;cursor:pointer;transition:all .15s ease;text-align:left;font-family:inherit}
.choice-card:hover{border-color:var(--border);background:var(--bg-hover)}
.choice-card.is-selected{border-color:var(--accent);background:rgba(0,122,153,.05);box-shadow:0 2px 8px rgba(0,122,153,.1)}
.choice-card.is-selected::after{content:"check_circle";font-family:'Material Icons Round';position:absolute;top:10px;right:10px;font-size:22px;color:var(--accent)}
.choice-card-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--bg-input);color:var(--text-muted);margin-bottom:10px;transition:all .15s ease}
.choice-card-icon .material-icons-round{font-size:22px}
.choice-card.is-selected .choice-card-icon{background:var(--accent);color:#fff}
.choice-card-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px;line-height:1.3}
.choice-card-help{font-size:12px;color:var(--text-muted);line-height:1.4}
@media (max-width:640px){.choice-cards{grid-template-columns:1fr;gap:10px}.choice-card{padding:14px}}

/* ====================================================================
   Bloco 8 NFC-e — Wizard pre-flight no PDV
   Componentes scoped pro wizard + outros modais NFC-e empilhados.
   z-index: wizard 1100 (sobre modalPagamento 1000), result 1200.
   ==================================================================== */
.modal-overlay--nfce-wizard{z-index:1100}
.modal-overlay--nfce-result{z-index:1200}
.modal-overlay--recarregar{z-index:1300}
/* NF-e (modelo 55) em modal-iframe no historico de vendas. Mesmo nivel do
   wizard NFC-e (sobre modalPagamento 1000). O .modal recebe width/height inline. */
.modal-overlay--nfe-emitir{z-index:1100}
.modal-overlay--nfce-wizard .modal{max-width:980px}
@media (max-width:768px){
  .modal-overlay--nfce-wizard .modal{max-width:100vw;max-height:100vh;border-radius:0;height:100vh}
}

/* Step indicator (2 passos do wizard) */
.wizard-step-indicator{display:flex;align-items:center;gap:8px;padding:12px 24px;border-bottom:1px solid var(--border-light);background:var(--bg-input)}
.wizard-step-indicator .step-dot{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border);color:var(--text-muted);font-size:12px;font-weight:700;flex-shrink:0}
.wizard-step-indicator .step-dot.active{background:var(--accent);border-color:var(--accent);color:#fff}
.wizard-step-indicator .step-dot.completed{background:var(--green);border-color:var(--green);color:#fff}
.wizard-step-indicator .step-label{font-size:12px;font-weight:600;color:var(--text-secondary)}
.wizard-step-indicator .step-line{flex:1;height:2px;background:var(--border-light);border-radius:1px;min-width:30px}
.wizard-step-indicator .step-line.completed{background:var(--green)}

/* Status badges (Bloco 8 — reusado em outros lugares no futuro) */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;line-height:1;white-space:nowrap}
.badge-success{background:rgba(22,163,74,.12);color:var(--green)}
.badge-danger{background:rgba(220,38,38,.12);color:var(--red)}
.badge-warning{background:rgba(217,119,6,.12);color:var(--yellow)}
.badge-neutral{background:var(--bg-hover);color:var(--text-muted)}
.badge-info{background:rgba(0,122,153,.12);color:var(--accent)}
.badge--solid.badge-success{background:var(--green);color:#fff}
.badge--solid.badge-danger{background:var(--red);color:#fff}
.badge--solid.badge-warning{background:var(--yellow);color:#fff}
.badge--solid.badge-info{background:var(--accent);color:#fff}
.badge--solid.badge-neutral{background:var(--text-muted);color:#fff}
/* Badge spinner — usado no indicador de verificacao cross-empresa do telefone (Bloco 2) */
@keyframes spin{to{transform:rotate(360deg)}}
.badge-spin .material-icons-round{animation:spin .7s linear infinite}
@media (prefers-reduced-motion: reduce){.badge-spin .material-icons-round{animation:none}}
/* Badges do Log financeiro (Caixa) — densidade de tabela ERP, 1 linha, tint+borda */
.cx-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:600;line-height:1.45;letter-spacing:.2px;white-space:nowrap;border:1px solid transparent}
.cx-badge--green {background:rgba(22,163,74,.10);color:#15803d;border-color:rgba(22,163,74,.22)}
.cx-badge--amber {background:rgba(217,119,6,.12);color:#b45309;border-color:rgba(217,119,6,.24)}
.cx-badge--blue  {background:rgba(0,122,153,.10);color:#0e6e88;border-color:rgba(0,122,153,.22)}
.cx-badge--red   {background:rgba(220,38,38,.10);color:#b91c1c;border-color:rgba(220,38,38,.22)}
.cx-badge--purple{background:rgba(124,58,237,.10);color:#6d28d9;border-color:rgba(124,58,237,.22)}
.cx-badge--orange{background:rgba(234,88,12,.10);color:#c2410c;border-color:rgba(234,88,12,.24)}
.cx-badge--gray  {background:var(--bg-hover);color:var(--text-secondary);border-color:var(--border-light)}
.btn-icon{width:36px;height:36px;padding:0;border-radius:8px;background:transparent;color:var(--text-muted);border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-icon:disabled{opacity:.4;cursor:not-allowed}
.btn-fab{width:40px;height:40px;padding:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* Alert banners */
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:8px;border-left:3px solid;font-size:13px;line-height:1.5}
.alert-warning{background:rgba(217,119,6,.08);border-color:var(--yellow);color:#92400e}
.alert-info{background:rgba(0,122,153,.06);border-color:var(--accent);color:var(--text-secondary)}
.alert-success{background:rgba(22,163,74,.08);border-color:var(--green);color:#166534}
.alert-danger{background:rgba(220,38,38,.08);border-color:var(--red);color:#991b1b}

/* Skeleton (loading) */
.skeleton{background:linear-gradient(90deg,var(--bg-hover) 0%,var(--bg-input) 50%,var(--bg-hover) 100%);background-size:200% 100%;animation:skeletonPulse 1.4s ease-in-out infinite;border-radius:6px;height:20px}
@keyframes skeletonPulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.skeleton{animation:none;opacity:.6}}

/* Expand-row inline (form fiscal dentro da tabela de produtos) */
.expand-row td{padding:0 !important;background:var(--bg-input)}
.expand-row-content{padding:14px 20px;border-top:2px solid var(--accent)}
.expand-row-content .form-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px}
@media (max-width:768px){.expand-row-content .form-grid{grid-template-columns:1fr}}
.expand-row-content .input-sm,
.expand-row-content .select-sm{padding:6px 10px !important;font-size:12.5px !important;width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-primary)}
.expand-row-content .input-sm:focus,
.expand-row-content .select-sm:focus{border-color:var(--accent);outline:none}

/* Autosave pill (header do wizard) */
.autosave-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;background:rgba(22,163,74,.08);color:var(--green);font-size:11px;font-weight:600}
.autosave-pill.is-saving{background:var(--bg-hover);color:var(--text-muted)}

/* Tabela de verificacao de produtos */
.verif-row td.col-status{width:90px}
.verif-row.fail{background:rgba(220,38,38,.04)}
.verif-row.fail td{border-color:rgba(220,38,38,.15)}

/* Cards de cliente nos resultados de busca (passo 1 do wizard) */
.client-result:hover{border-color:var(--accent) !important;background:rgba(0,122,153,.04) !important}
.client-result:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* === Bloco 9.1: Toggle NFC-e como card clicavel (substitui checkbox feio) === */
.nfce-toggle-wrap{margin-top:12px;position:relative}
.nfce-toggle-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.nfce-toggle-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px dashed var(--border);border-radius:10px;background:var(--bg-input);cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .15s ease;user-select:none}
.nfce-toggle-card:hover{border-color:var(--accent);background:var(--bg-hover)}
.nfce-toggle-card:active{transform:scale(.99)}
.nfce-toggle-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:var(--bg-card);color:var(--text-muted);flex-shrink:0;transition:background .18s ease,color .18s ease}
.nfce-toggle-text{flex:1;min-width:0;line-height:1.35}
.nfce-toggle-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:2px;transition:color .18s ease}
.nfce-toggle-hint{font-size:12px;color:var(--text-muted);transition:color .18s ease}
.nfce-toggle-hint::before{content:"Clique aqui para ativar"}
.nfce-toggle-check{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--bg-card);color:var(--text-muted);opacity:0;transform:scale(.7);transition:opacity .18s ease,transform .18s ease,background .18s ease,color .18s ease;flex-shrink:0}

/* Estado ATIVO (checkbox marcado) — tudo verde */
.nfce-toggle-input:checked + .nfce-toggle-card{border-color:var(--green);border-style:solid;background:rgba(22,163,74,.10);box-shadow:0 0 0 4px rgba(22,163,74,.05)}
.nfce-toggle-input:checked + .nfce-toggle-card .nfce-toggle-icon{background:var(--green);color:#fff}
.nfce-toggle-input:checked + .nfce-toggle-card .nfce-toggle-title{color:var(--green)}
.nfce-toggle-input:checked + .nfce-toggle-card .nfce-toggle-hint{color:var(--green)}
.nfce-toggle-input:checked + .nfce-toggle-card .nfce-toggle-hint::before{content:"Cupom sera emitido apos o pagamento"}
.nfce-toggle-input:checked + .nfce-toggle-card .nfce-toggle-check{background:var(--green);color:#fff;opacity:1;transform:scale(1)}

/* Acessibilidade */
.nfce-toggle-input:focus-visible + .nfce-toggle-card{box-shadow:0 0 0 3px rgba(0,122,153,.25)}
.nfce-toggle-input:checked:focus-visible + .nfce-toggle-card{box-shadow:0 0 0 3px rgba(22,163,74,.30)}
@media (prefers-reduced-motion: reduce){
  .nfce-toggle-card,.nfce-toggle-icon,.nfce-toggle-title,.nfce-toggle-hint,.nfce-toggle-check{transition:none}
}

/* ============================================================
   PADRAO GLIVVO: Pick Card (componente generico de selecao)
   ============================================================
   Substitui checkboxes/radios cinzas feios por cards clicaveis
   que ficam totalmente coloridos quando selecionados. Usar em:
     - Toggles binarios on/off (1 input checkbox + 1 card)
     - Pares mutuamente exclusivos (radio group + 2 cards)
     - Listas de opcoes (radio group + N cards lado a lado)

   USO:
     <div class="pick-card-wrap">                    (modo standalone)
       <input type="checkbox" id="x" class="pick-card-input">
       <label for="x" class="pick-card variant-green">
         <div class="pick-card-icon">SVG</div>
         <div class="pick-card-text">
           <div class="pick-card-title">Titulo</div>
           <div class="pick-card-hint" data-off="...off..." data-on="...on..."></div>
         </div>
         <div class="pick-card-check">SVG check</div>
       </label>
     </div>

     <div class="pick-group">                         (modo radio inline)
       <input type="radio" name="x" id="a" class="pick-card-input">
       <label for="a" class="pick-card compact variant-green">...</label>
       <input type="radio" name="x" id="b" class="pick-card-input">
       <label for="b" class="pick-card compact variant-red">...</label>
     </div>

   VARIANTES:
     variant-green   verde   (acao positiva, default)
     variant-red     vermelho (alerta, defeito, exclusao)
     variant-amber   ambar   (atencao, garantia)
     variant-accent  azul    (acao neutra/primaria)
   ============================================================ */
.pick-card-wrap{margin-top:12px;position:relative}
.pick-group{display:flex;gap:10px;flex-wrap:wrap}
.pick-card-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.pick-card{
  --pick-active: var(--green);
  --pick-active-rgb: 22,163,74;
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:2px dashed var(--border);border-radius:10px;
  background:var(--bg-input);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .15s ease;
  user-select:none;flex:1;min-width:0
}
.pick-card.variant-green {--pick-active:var(--green);--pick-active-rgb:22,163,74}
.pick-card.variant-red   {--pick-active:var(--red);--pick-active-rgb:220,38,38}
.pick-card.variant-amber {--pick-active:var(--yellow);--pick-active-rgb:217,119,6}
.pick-card.variant-accent{--pick-active:var(--accent);--pick-active-rgb:0,122,153}
.pick-card.compact{padding:8px 12px;gap:8px;flex:1;min-width:140px}
.pick-card:hover{border-color:var(--pick-active);background:var(--bg-hover)}
.pick-card:active{transform:scale(.99)}

.pick-card-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:8px;
  background:var(--bg-card);color:var(--text-muted);flex-shrink:0;
  transition:background .18s ease,color .18s ease
}
.pick-card.compact .pick-card-icon{width:30px;height:30px;border-radius:6px}
.pick-card.compact .pick-card-icon svg{width:16px;height:16px}

.pick-card-text{flex:1;min-width:0;line-height:1.35}
.pick-card-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:2px;transition:color .18s ease}
.pick-card.compact .pick-card-title{font-size:13px;margin-bottom:0}
.pick-card-hint{font-size:12px;color:var(--text-muted);transition:color .18s ease}
.pick-card.compact .pick-card-hint{font-size:11px}
.pick-card-hint::before{content:attr(data-off)}

.pick-card-check{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--bg-card);color:var(--text-muted);
  opacity:0;transform:scale(.7);
  transition:opacity .18s ease,transform .18s ease,background .18s ease,color .18s ease;
  flex-shrink:0
}
.pick-card.compact .pick-card-check{width:22px;height:22px}
.pick-card.compact .pick-card-check svg{width:13px;height:13px}

/* Estado ATIVO — pintar tudo na cor da variante */
.pick-card-input:checked + .pick-card{
  border-color:var(--pick-active);
  border-style:solid;
  background:rgba(var(--pick-active-rgb),.10);
  box-shadow:0 0 0 4px rgba(var(--pick-active-rgb),.05)
}
.pick-card-input:checked + .pick-card .pick-card-icon{
  background:var(--pick-active);color:#fff
}
.pick-card-input:checked + .pick-card .pick-card-title{color:var(--pick-active)}
.pick-card-input:checked + .pick-card .pick-card-hint{color:var(--pick-active)}
.pick-card-input:checked + .pick-card .pick-card-hint::before{content:attr(data-on)}
.pick-card-input:checked + .pick-card .pick-card-check{
  background:var(--pick-active);color:#fff;opacity:1;transform:scale(1)
}

/* Acessibilidade */
.pick-card-input:focus-visible + .pick-card{
  box-shadow:0 0 0 3px rgba(var(--pick-active-rgb),.30)
}
/* Uso click-based: .pick-card sem input irmao (role=button/tabindex=0).
   Espelha o focus ring acima para que o foco por teclado fique visivel. */
.pick-card[tabindex]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(var(--pick-active-rgb),.30)
}
.pick-card-input:disabled + .pick-card{opacity:.5;cursor:not-allowed}
@media (prefers-reduced-motion: reduce){
  .pick-card,.pick-card-icon,.pick-card-title,.pick-card-hint,.pick-card-check{transition:none}
}

/* ============================================================
   PADRAO GLIVVO: Action Button (.act-btn) — familia oficial de
   botoes de acao compactos (linha de tabela, header de modal,
   barras de acao). Outline neutro que preenche na cor no hover,
   icone SVG opcional 13x13. Tokens primeiro. Generalizacao da
   familia .hist-btn (vendas.html), agora com :focus-visible +
   :active + :disabled e container horizontal.
   ============================================================ */
.act-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.act-stack{display:flex;flex-direction:column;gap:5px;align-items:stretch;min-width:106px}
.act-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:5px 10px;border-radius:7px;
  font-size:11.5px;font-weight:600;line-height:1.1;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);
  font-family:inherit;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s;
}
.act-stack .act-btn{width:100%;justify-content:flex-start}
.act-btn svg{width:13px;height:13px;flex-shrink:0}
.act-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.act-btn:active{transform:translateY(.5px)}
.act-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,122,153,.30)}
.act-btn:disabled,.act-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.act-btn--sm{padding:4px 8px;font-size:11px}
.act-btn--icon{padding:5px 7px;gap:0}
/* PRIMARIA (Abrir / Finalizar / Aceitar) — filled verde */
.act-btn--go{background:var(--green);border-color:var(--green);color:#fff}
.act-btn--go:hover{background:#15803d;border-color:#15803d;color:#fff}
.act-btn--go:focus-visible{box-shadow:0 0 0 3px rgba(22,163,74,.35)}
.act-btn--go:disabled,.act-btn--go[disabled]{background:var(--bg-input);border-color:var(--border-light);color:var(--text-muted)}
/* ACCENT (neutro/primario azul — Extrato) */
.act-btn--accent{color:var(--accent);border-color:rgba(0,122,153,.40)}
.act-btn--accent:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* WhatsApp */
.act-btn--wa{color:var(--whatsapp,#25d366);border-color:rgba(37,211,102,.45)}
.act-btn--wa:hover{background:var(--whatsapp,#25d366);color:#fff;border-color:var(--whatsapp,#25d366)}
.act-btn--wa:focus-visible{box-shadow:0 0 0 3px rgba(37,211,102,.35)}
/* CREDITO + (adicionar) */
.act-btn--credit{color:var(--green);border-color:rgba(22,163,74,.40);font-weight:700}
.act-btn--credit:hover{background:var(--green);color:#fff;border-color:var(--green)}
/* CREDITO - / reduzir (vermelho outline) */
.act-btn--debit{color:var(--red);border-color:rgba(220,38,38,.40);font-weight:700}
.act-btn--debit:hover{background:var(--red);color:#fff;border-color:var(--red)}
/* NFC-e / NF-e (paridade com hist-btn de vendas.html) */
.act-btn--nfce{color:var(--green);border-color:rgba(22,163,74,.40)}
.act-btn--nfce:hover{background:var(--green);color:#fff;border-color:var(--green)}
.act-btn--nfe{color:var(--accent);border-color:rgba(0,122,153,.40)}
.act-btn--nfe:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.act-btn--nfe-emitida{color:var(--accent);border-color:rgba(0,122,153,.40);background:rgba(0,122,153,.07);font-weight:700}
.act-btn--nfe-emitida:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* DESTRUTIVO (ghost vermelho — Excluir/Cancelar, afastado das demais) */
.act-btn--danger{color:var(--red);border-color:transparent;background:transparent}
.act-btn--danger:hover{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.35);color:var(--red)}
.act-btn--danger:focus-visible{box-shadow:0 0 0 3px rgba(220,38,38,.30)}
@media (max-width:640px){
  .act-btn{padding:8px 12px;font-size:12px}
  .act-btn--sm{padding:7px 10px}
}
@media (prefers-reduced-motion:reduce){.act-btn{transition:none}}

/* ============================================================
   Extrato — tags de tipo (substituem emojis). Colorem por
   token, pilula arredondada, borda alpha da propria cor.
   ============================================================ */
.ext-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap;
  --tag-c:var(--text-muted);--tag-rgb:107,114,128;
  color:var(--tag-c);background:rgba(var(--tag-rgb),.12);
  border:1px solid rgba(var(--tag-rgb),.28);
}
.ext-tag--venda    {--tag-c:#1d4ed8;--tag-rgb:29,78,216}
.ext-tag--pagamento{--tag-c:var(--green);--tag-rgb:22,163,74}
.ext-tag--devolucao{--tag-c:var(--yellow);--tag-rgb:217,119,6}
.ext-tag--garantia {--tag-c:#a855f7;--tag-rgb:168,85,247}
.ext-tag--credito  {--tag-c:#2563eb;--tag-rgb:37,99,235}
.ext-tag--neutro   {--tag-c:var(--text-muted);--tag-rgb:107,114,128}

/* ============================================================
   Overrides LOCAIS de modal amplo + layout flex (single-scroll).
   NAO tocam no .modal global. Usar sempre junto de .modal.
   .modal--flex resolve a rolagem dupla: o modal vira column,
   header/footer fixos, e SO a regiao marcada .modal-scroll-fill rola.
   ============================================================ */
.modal.modal--wide {max-width:1400px;width:96vw}
.modal.modal--xwide{max-width:1600px;width:96vw}
.modal.modal--flex{display:flex;flex-direction:column;overflow:hidden;max-height:92vh}
.modal.modal--flex > .modal-header,
.modal.modal--flex > .modal-footer{flex:0 0 auto}
.modal.modal--flex > .modal-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.modal-scroll-fill{flex:1 1 auto;min-height:0;overflow-y:auto}

/* ============================================================
   Scrollbar grossa/visivel — SO nos containers marcados
   (.scroll-thick). NAO altera scrollbar global do sistema.
   ============================================================ */
.scroll-thick{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.scroll-thick::-webkit-scrollbar{width:12px;height:12px}
.scroll-thick::-webkit-scrollbar-track{background:transparent}
.scroll-thick::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;border:3px solid var(--bg-card)}
.scroll-thick::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ============================================================
   FAROL DE COBRANCA (Cobranças v2) — dot 10px + variantes por cor.
   Usado no painel de faróis (aba Cobrança). Cor via tokens (nunca inline).
   ============================================================ */
/* Linha do painel de cobrancas clicavel (abre edicao do cliente na aba Cobranca) */
tr.cob-row{cursor:pointer}
.farol{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;vertical-align:middle}
.farol--verde{background:var(--green)}
.farol--amarelo{background:var(--farol-amarelo)}
.farol--laranja{background:var(--farol-laranja)}
.farol--vermelho{background:var(--red)}
.farol--pendente{background:var(--text-muted)}
/* linha do farol: dot + motivo lado a lado */
.farol-cell{display:inline-flex;align-items:center;gap:8px}
.farol-cell .farol-motivo{font-size:12px;color:var(--text-muted)}
/* Cobranças v2.2 — farol retangular no Vencimento, tag de tipo e strip lateral do farol geral */
.farol-box{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;box-sizing:border-box;padding:8px 10px;border-radius:8px;font-size:12.5px;font-weight:800;line-height:1.15;text-align:center;white-space:nowrap;--frl-rgb:107,114,128;--frl-c:var(--text-muted);color:var(--frl-c);background:rgba(var(--frl-rgb),.14);border:1px solid rgba(var(--frl-rgb),.32)}
.farol-box--verde{--frl-rgb:22,163,74;--frl-c:var(--green)} .farol-box--amarelo{--frl-rgb:234,179,8;--frl-c:var(--farol-amarelo)} .farol-box--laranja{--frl-rgb:234,88,12;--frl-c:var(--farol-laranja)} .farol-box--vermelho{--frl-rgb:220,38,38;--frl-c:var(--red)} .farol-box--pendente{--frl-rgb:107,114,128;--frl-c:var(--text-muted)}
.tipo-tag{display:inline-flex;align-items:center;justify-content:center;min-width:118px;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;--tt-rgb:107,114,128;--tt-c:var(--text-muted);color:var(--tt-c);background:rgba(var(--tt-rgb),.12);border:1px solid rgba(var(--tt-rgb),.30)}
.tipo-tag--semanal{--tt-rgb:37,99,235;--tt-c:#2563eb} .tipo-tag--quinzenal{--tt-rgb:8,145,178;--tt-c:#0891b2} .tipo-tag--mensal{--tt-rgb:79,70,229;--tt-c:#4f46e5} .tipo-tag--final_dia{--tt-rgb:71,85,105;--tt-c:#475569} .tipo-tag--garantia{--tt-rgb:168,85,247;--tt-c:#a855f7} .tipo-tag--a_vista{--tt-rgb:107,114,128;--tt-c:var(--text-muted)} .tipo-tag--por_limite{--tt-rgb:0,122,153;--tt-c:var(--accent)} .tipo-tag--pendente{--tt-rgb:107,114,128;--tt-c:var(--text-muted);border-style:dashed}
td.cob-strip{width:6px;min-width:6px;padding:0;border-radius:5px 0 0 5px} td.cob-strip--verde{background:var(--green)} td.cob-strip--amarelo{background:var(--farol-amarelo)} td.cob-strip--laranja{background:var(--farol-laranja)} td.cob-strip--vermelho{background:var(--red)} td.cob-strip--pendente{background:var(--text-muted)}


/* ============================================================
   FASE 9 — WhatsApp Web: pick-card como ACAO + aba Telefones
   (blocos do Designer, telefones_novo.css). Reusa 100% dos tokens
   var(--pick-active*) do .pick-card oficial acima.
   ============================================================ */
/* ════════════════════════════════════════════════════════════
   DELIVERABLE 1/2 — PICK-CARD como AÇÃO (nao-toggle)
   Adicionar ao final de static/css/style.css (logo apos o bloco
   .pick-card existente, linhas ~1682).

   Reaproveita 100% do visual .pick-card (compact + variant-*)
   porem num <button>/<a>: DISPARA uma acao em vez de ligar/desligar.
   - resting: outline tracejado + icone/seta muted (igual pick-card OFF)
   - hover  : PREENCHE na cor da variante (fiel ao .act-btn "fills on hover")
   - .is-loading : spinner no icone, sem clique (usar aria-busy=true)
   Concluido vira STATUS: .pick-card--on (espelha o :checked do toggle)
   num <div> nao-clicavel + .pick-card-actions (act-btn --sm).
   ════════════════════════════════════════════════════════════ */
button.pick-card,a.pick-card{font:inherit;text-align:left;width:100%;color:inherit;-webkit-appearance:none;appearance:none}

/* Seta "ir" sempre visivel no slot final da acao (o toggle a esconde ate checar) */
.pick-card--action .pick-card-check{opacity:1;transform:none;background:transparent;color:var(--text-muted)}
.pick-card--action:hover{border-color:var(--pick-active);border-style:solid;background:rgba(var(--pick-active-rgb),.06)}
.pick-card--action:hover .pick-card-icon{background:var(--pick-active);color:#fff}
.pick-card--action:hover .pick-card-title{color:var(--pick-active)}
.pick-card--action:hover .pick-card-check{color:var(--pick-active)}
.pick-card--action:active{transform:scale(.99)}

/* Carregando (criando grupo) */
.pick-card.is-loading{pointer-events:none;border-style:solid;border-color:var(--pick-active)}
.pick-card.is-loading .pick-card-icon{background:var(--pick-active);color:#fff}
.pick-card.is-loading .pick-card-icon svg{animation:pc-spin .8s linear infinite}
.pick-card.is-loading .pick-card-title{color:var(--pick-active)}
.pick-card.is-loading .pick-card-check{opacity:0}
@keyframes pc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.pick-card.is-loading .pick-card-icon svg{animation:none}}

/* Concluido / status (espelha o estado :checked do toggle, porem sem input irmao) */
.pick-card--on{border-color:var(--pick-active);border-style:solid;
  background:rgba(var(--pick-active-rgb),.10);box-shadow:0 0 0 4px rgba(var(--pick-active-rgb),.05)}
.pick-card--on .pick-card-icon{background:var(--pick-active);color:#fff}
.pick-card--on .pick-card-title{color:var(--pick-active)}
.pick-card--on .pick-card-hint{color:var(--pick-active)}
.pick-card--on .pick-card-hint::before{content:attr(data-on)}
.pick-card--status{cursor:default}
.pick-card--status .pick-card-check{opacity:1;transform:none;background:var(--pick-active);color:#fff}
/* Acoes secundarias dentro do status (copiar convite / reparar) */
.pick-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* ════════════════════════════════════════════════════════════
   DELIVERABLE 2/2 — ABA TELEFONES (redesign do card de numero)
   Adicionar ao final de static/css/style.css.
   ════════════════════════════════════════════════════════════ */
.tel-list{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}

.tel-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .18s ease,box-shadow .18s ease}
.tel-card--principal{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,153,.08)}

.tel-card__main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tel-card__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;flex-shrink:0;background:var(--bg-input);color:var(--accent)}
.tel-card--principal .tel-card__icon{background:var(--accent);color:#fff}
.tel-card__icon svg{width:20px;height:20px}

.tel-card__fields{flex:1 1 260px;min-width:0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tel-card__ident{flex:0 1 150px;min-width:110px;font-size:12px;font-weight:600;color:var(--text-muted);
  padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input)}
.tel-card__num{flex:1 1 170px;min-width:150px;font-size:16px;font-weight:600;color:var(--text-primary);
  padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card)}
.tel-card__ident:focus,.tel-card__num:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,153,.15)}

.tel-card__tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.tel-star,.tel-del{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:8px;cursor:pointer;background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-muted);transition:border-color .15s ease,color .15s ease,background .15s ease}
.tel-star svg,.tel-del svg{width:18px;height:18px}
.tel-star:hover{border-color:var(--accent);color:var(--accent)}
.tel-star.is-on{border-color:var(--accent);color:var(--accent);background:rgba(0,122,153,.08)}
.tel-star.is-on svg{fill:currentColor}
.tel-del:hover{border-color:var(--red);color:var(--red);background:rgba(220,38,38,.06)}
.tel-star:focus-visible,.tel-del:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,122,153,.30)}

.tel-card__groups{border-top:1px dashed var(--border);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.tel-card__groups-label{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--text-muted);display:flex;align-items:center;gap:6px}
.tel-card__groups-label svg{width:14px;height:14px;color:var(--accent)}

.tel-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:12px 16px;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--accent);background:rgba(0,122,153,.05);
  border:1.5px dashed rgba(0,122,153,.45);border-radius:10px;
  transition:background .15s ease,border-color .15s ease}
.tel-add:hover{background:rgba(0,122,153,.10);border-color:var(--accent)}
.tel-add:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,122,153,.30)}
.tel-add svg{width:18px;height:18px}

.tel-empty{font-size:13px;color:var(--text-muted);padding:20px;text-align:center;
  border:1px dashed var(--border);border-radius:10px}

/* mobile: tudo empilha, alvos de toque >=40px */
@media (max-width:640px){
  .tel-card__fields{flex:1 1 100%}
  .tel-card__tools{width:100%;justify-content:flex-end}
  .tel-star,.tel-del{width:40px;height:40px}
}
.pick-card--action:disabled,.pick-card--action[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* =========================================================
   CONFIRMACAO "Mensagem enviada" (componente global reutilizavel)
   Usado por todos os envios reformados (painel + PIX/nota/devolucao).
   Overlay centrado pequeno, circulo com checkmark animado, fade-in/out ~1.8s.
   JS: window.glivvoEnvioSucesso() em js/envio_destino.js.
   ========================================================= */
.envio-ok-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);pointer-events:none;animation:envioOkFadeIn .18s ease both}
.envio-ok-overlay.envio-ok-out{animation:envioOkFadeOut .35s ease both}
.envio-ok-card{display:flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--bg-card);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:18px;
  padding:26px 34px;box-shadow:0 18px 50px rgba(0,0,0,.35);animation:envioOkPop .32s cubic-bezier(.22,1.2,.36,1) both}
.envio-ok-circle{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--green) 16%,transparent)}
.envio-ok-check{width:52px;height:52px}
.envio-ok-check-circle{stroke:var(--green);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;
  animation:envioOkCircle .5s cubic-bezier(.65,0,.45,1) .05s forwards}
.envio-ok-check-mark{stroke:var(--green);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:48;stroke-dashoffset:48;animation:envioOkMark .32s cubic-bezier(.65,0,.45,1) .42s forwards}
.envio-ok-text{font-size:15px;font-weight:700;color:var(--text,#fff);letter-spacing:.2px}
/* Fase de progresso (spinner) — MESMO circulo/cores do sucesso (Samuel 18/07):
   so o miolo muda (spinner verde -> checkmark verde). O .envio-ok-circle fica
   VISUALMENTE IDENTICO nas duas fases. */
.envio-ok-spinner{width:34px;height:34px;border-radius:50%;
  border:3px solid color-mix(in srgb,var(--green) 22%,transparent);border-top-color:var(--green);
  animation:envioOkSpin .7s linear infinite}
@keyframes envioOkFadeIn{from{opacity:0}to{opacity:1}}
@keyframes envioOkFadeOut{from{opacity:1}to{opacity:0}}
@keyframes envioOkPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes envioOkCircle{to{stroke-dashoffset:0}}
@keyframes envioOkMark{to{stroke-dashoffset:0}}
@keyframes envioOkSpin{to{transform:rotate(360deg)}}
@keyframes envioOkPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){
  .envio-ok-overlay,.envio-ok-overlay.envio-ok-out,.envio-ok-card{animation-duration:.01ms;animation-delay:0s}
  .envio-ok-check-circle,.envio-ok-check-mark{animation:none;stroke-dashoffset:0}
  /* Sem giro — so pulso de opacidade (pedido Samuel 18/07). */
  .envio-ok-spinner{animation:envioOkPulse 1s ease-in-out infinite}
}

/* Barra de seleção de devoluções no modal de extrato — envio consolidado
   "Resumo das devoluções". Fica presa no rodapé do modal-body, acima do fundo. */
.ext-sel-bar{
  position:sticky;bottom:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;margin-top:8px;
  background:var(--bg-card);border-top:1px solid var(--border);
  font-size:13px;color:var(--text)
}
.ext-sel-chk{
  accent-color:var(--accent);margin-right:8px;cursor:pointer;
  width:16px;height:16px;vertical-align:middle
}

/* ============================================================
   TERMÔMETRO DE PEÇAS (aba da Análise Técnica)
   Régua de criticidade por clientes distintos. Reusa a rampa de
   severidade dos faróis (verde->amarelo->laranja->vermelho); os
   --orange/--purple de brand (#FF6F00) são claros demais p/ farol.
   ============================================================ */
:root{
  --crit-critico:     var(--red);            /* #dc2626 */
  --crit-preocupante: var(--farol-laranja);  /* #ea580c — entre amarelo e vermelho */
  --crit-atencao:     var(--farol-amarelo);  /* #eab308 */
  --crit-bom:         var(--green);          /* #16a34a */
}
/* badge laranja (nível Alerta) — não existe na família base */
.badge-preocupante{background:rgba(234,88,12,.12);color:#c2410c}
.badge--solid.badge-preocupante{background:var(--crit-preocupante);color:#fff}

.termo-analise-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}

.termo-toolbar{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin:4px 0 20px}
.termo-fld{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}
.termo-fld select{min-width:200px;text-transform:none;font-weight:500;letter-spacing:0;color:var(--text-primary)}
.termo-periodo{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.termo-per-btn{padding:9px 16px;font-size:13px;font-weight:600;background:var(--bg-card);color:var(--text-secondary);border:none;border-right:1px solid var(--border);cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.termo-per-btn:last-child{border-right:none}
.termo-per-btn:hover{background:var(--bg-hover)}
.termo-per-btn.is-active{background:var(--accent);color:#fff}

.termo-kpis{margin-bottom:20px}
.termo-kpi--crit{border-left:4px solid var(--crit-critico)}
.termo-kpi-dot,.termo-legenda__dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:6px}
.termo-kpi-dot.is-critico{background:var(--crit-critico)}

.termo-chart{background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;padding:20px;margin-bottom:20px}
.termo-chart__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.termo-chart__title{font-size:15px;font-weight:700;color:var(--text-primary);margin:0}
.termo-chart__legend{display:flex;gap:16px;font-size:12px;color:var(--text-muted)}
.termo-chart__lg{display:inline-flex;align-items:center;gap:6px}
.termo-lg-bar{width:12px;height:12px;border-radius:2px;background:var(--red);opacity:.85}
.termo-lg-line{width:16px;height:2px;background:var(--accent)}
.termo-chart__canvas{width:100%}

.termo-svg{width:100%;height:auto;display:block}
.termo-axis{font-size:10px;fill:var(--text-muted)}
.termo-axis--accent{fill:var(--accent)}
.termo-bar{cursor:pointer}

.termo-empty{text-align:center;padding:40px 20px;color:var(--text-muted)}
.termo-empty svg{color:var(--border);margin-bottom:10px}
.termo-empty__t{font-size:15px;font-weight:600;color:var(--text-secondary)}
.termo-empty__s{font-size:13px;margin-top:4px}

.termo-legenda{border:1px solid var(--border-light);border-radius:10px;padding:14px 18px;background:var(--bg-card);margin-bottom:20px}
.termo-legenda__title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.termo-legenda__body{font-size:13px;color:var(--text-muted);margin-bottom:10px}
.termo-legenda__items{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-secondary)}
.termo-legenda__dot.is-critico{background:var(--crit-critico)}
.termo-legenda__dot.is-preocupante{background:var(--crit-preocupante)}
.termo-legenda__dot.is-atencao{background:var(--crit-atencao)}
.termo-legenda__dot.is-bom{background:var(--crit-bom)}

.termo-rank__title{font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 12px}
.termo-rank{display:flex;flex-direction:column;gap:8px}
.termo-row{display:grid;grid-template-columns:4px 48px 1fr auto;gap:14px;align-items:center;background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;padding:14px 16px;cursor:pointer;transition:box-shadow .15s,transform .05s}
.termo-row:hover{box-shadow:var(--shadow-md)}
.termo-row:active{transform:translateY(.5px)}
.termo-row:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,122,153,.30)}
.termo-row__rail{width:4px;height:44px;border-radius:2px;background:var(--text-muted)}
.termo-row.is-critico .termo-row__rail{background:var(--crit-critico)}
.termo-row.is-preocupante .termo-row__rail{background:var(--crit-preocupante)}
.termo-row.is-atencao .termo-row__rail{background:var(--crit-atencao)}
.termo-row.is-bom .termo-row__rail{background:var(--crit-bom)}
.termo-row.is-parcial .termo-row__rail{background:var(--text-muted)}
.termo-row__main{min-width:0}
.termo-row__top{font-size:14.5px;font-weight:600;color:var(--text-primary);line-height:1.35}
.termo-row__cod{font-family:monospace;font-weight:700}
.termo-row__cat{font-size:12px;color:var(--text-muted);margin-top:2px}
.termo-row__met{font-size:12.5px;color:var(--text-secondary);margin-top:4px}
.termo-row__ver{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}
.termo-row--skel{height:76px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;position:relative;overflow:hidden}
.termo-row--skel::after,.termo-skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.05),transparent);animation:termoShimmer 1.2s infinite}
.termo-skel{position:relative;overflow:hidden;background:var(--bg-hover);border-radius:6px;display:block}
@keyframes termoShimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.termo-row--skel::after,.termo-skel::after{animation:none}}

.termo-gauge{flex-shrink:0}
.termo-gauge__n{font-size:14px;font-weight:800;fill:var(--text-primary)}
.termo-gauge__d{font-size:8px;fill:var(--text-muted)}

.termo-lote-tag{display:inline-block;font-size:10.5px;font-weight:700;color:var(--text-muted);background:var(--bg-hover);border:1px solid var(--border-light);border-radius:5px;padding:1px 7px;vertical-align:middle;margin-left:4px}

/* ---- detalhe (modal) ---- */
.termo-det__title{font-size:16px;font-weight:700;color:var(--text-primary);line-height:1.3}
.termo-det__sub{font-size:12.5px;color:var(--text-muted);margin-top:3px}
.termo-det__section{margin-bottom:24px}
.termo-det__box{display:flex;align-items:center;gap:16px;background:var(--bg-hover);border:1px solid var(--border-light);border-radius:10px;padding:14px 18px}
.termo-det__regua{font-size:14px;font-weight:700;color:var(--text-primary)}
.termo-det__meta{font-size:12.5px;color:var(--text-muted);margin-top:4px}
.termo-det__h{font-size:14px;font-weight:700;color:var(--text-primary);margin:0 0 10px}
.termo-det__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.termo-det__note{font-size:13px;color:var(--text-muted);padding:12px 0}

.termo-cli-wrap{display:flex;flex-wrap:wrap;gap:8px}
.termo-cli{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-hover);border:1px solid var(--border-light);border-radius:8px;font-size:13px}
.termo-cli__nome{font-weight:600;color:var(--text-primary)}
.termo-cli__n{font-size:11.5px;color:var(--text-muted);white-space:nowrap}

.termo-donut__wrap{display:flex;justify-content:center}
.termo-donut__c{font-size:20px;font-weight:800;fill:var(--text-primary)}
.termo-donut__cs{font-size:9px;fill:var(--text-muted)}
.termo-donut__leg{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-top:10px;font-size:12px;color:var(--text-secondary)}
.termo-donut__lg{display:inline-flex;align-items:center;gap:5px}
.termo-donut__sw{width:10px;height:10px;border-radius:2px;display:inline-block}

.termo-tbl-wrap{overflow-x:auto;border:1px solid var(--border-light);border-radius:8px}
.termo-tbl{width:100%;border-collapse:collapse;font-size:13px}
.termo-tbl th{text-align:left;padding:9px 12px;background:var(--bg-hover);color:var(--text-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;position:sticky;top:0}
.termo-tbl td{padding:9px 12px;border-top:1px solid var(--border-light);color:var(--text-primary)}

.termo-tip{position:fixed;z-index:10050;display:none;pointer-events:none;background:var(--text-primary);color:var(--bg-card);padding:6px 10px;border-radius:6px;font-size:12px;font-weight:600;box-shadow:var(--shadow-md);white-space:nowrap}

.termo-toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);z-index:10060;max-width:90vw;padding:14px 22px;border-radius:12px;font-size:14px;font-weight:700;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.25);opacity:0;transition:opacity .3s,transform .3s}
.termo-toast.show{opacity:1;transform:translate(-50%,0)}
.termo-toast.is-ok{background:var(--green)}
.termo-toast.is-erro{background:var(--red)}
@media (prefers-reduced-motion:reduce){.termo-toast{transition:none}}

@media (max-width:768px){
  .termo-det__cols{grid-template-columns:1fr;gap:16px}
  .termo-row{grid-template-columns:4px 44px 1fr;gap:10px}
  .termo-row__ver{grid-column:3;justify-self:start;margin-top:2px}
  .termo-fld select{min-width:0;width:100%}
  .termo-toolbar{gap:12px}
}