/* ERP KL Web: Estilos Modernizados com Design System Premium */
.erp-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.85rem; }
.erp-tab { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1.1rem; background: var(--bg-card, rgba(255,255,255,0.05)); border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.erp-tab:hover { color: var(--text-primary); border-color: var(--accent); transform: translateY(-1px); }
.erp-tab.active { background: linear-gradient(135deg, var(--accent, #0284c7) 0%, #0369a1 100%); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3); }

.erp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; margin-bottom: 1.25rem; }
.erp-toolbar-left { display: flex; flex-wrap: wrap; gap: 0.65rem; flex: 1; min-width: 240px; }
.erp-search, .erp-toolbar select { padding: 0.65rem 0.95rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md, 10px); color: var(--text-primary); font: inherit; font-size: 0.88rem; transition: border-color 0.2s, box-shadow 0.2s; }
.erp-search:focus, .erp-toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15); outline: none; }
.erp-search { flex: 1; min-width: 200px; max-width: 380px; }

.erp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md, 12px); background: var(--bg-card); box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.erp-table-wrap .crm-table { min-width: 660px; width: 100%; border-collapse: collapse; }
.erp-table-wrap .crm-table th { padding: 0.85rem 1rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; font-weight: 700; border-bottom: 1px solid var(--border); }
.erp-table-wrap .crm-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.erp-table-wrap .crm-table tbody tr { transition: background 0.15s; }
.erp-table-wrap .crm-table tbody tr:hover { background: rgba(0,0,0,0.015); }
.dark-mode .erp-table-wrap .crm-table tbody tr:hover { background: rgba(255,255,255,0.025); }

.erp-actions { white-space: nowrap; text-align: right; }
.erp-actions button { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 8px; padding: 0.4rem 0.65rem; margin-left: 0.3rem; font: inherit; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
.erp-actions button:hover { color: #fff; background: var(--accent); border-color: var(--accent); transform: scale(1.05); }

.erp-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.erp-ok { background: rgba(16, 185, 129, 0.14); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); }
.erp-warn { background: rgba(234, 179, 8, 0.14); color: #d97706; border: 1px solid rgba(234, 179, 8, 0.25); }
.erp-bad { background: rgba(239, 68, 68, 0.14); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25); }
.erp-off { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); }
.erp-red { color: #ef4444; font-weight: 700; }
.erp-muted { color: var(--text-muted); font-size: 0.85rem; }
.erp-empty { padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); border: 2px dashed var(--border); border-radius: 14px; background: rgba(127,127,127,0.02); }
.erp-note { display: flex; gap: 0.75rem; align-items: center; padding: 1rem 1.2rem; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text-secondary); font-size: 0.88rem; box-shadow: 0 1px 4px rgba(0,0,0,0.02); }
.erp-h3 { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.85rem; }

.erp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.erp-cards.small { grid-template-columns: repeat(auto-fill, minmax(190px, 240px)); }
.erp-card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; align-items: center; padding: 1.15rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; transition: all 0.2s ease-in-out; box-shadow: 0 2px 6px rgba(0,0,0,0.02); }
.erp-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.05); }
.erp-card i { grid-row: span 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(2, 132, 199, 0.12); color: var(--accent); font-size: 1.15rem; }
.erp-card span { font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; }
.erp-card strong { font-size: 1.25rem; color: var(--text-primary); font-weight: 800; letter-spacing: -0.02em; }
.erp-card.good i { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.erp-card.bad i { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.erp-card.bad strong { color: #ef4444; }

.erp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.erp-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem; min-width: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.erp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.erp-list li { display: flex; justify-content: space-between; gap: 0.85rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; color: var(--text-primary); }
.erp-list li:last-child { border-bottom: 0; }
.erp-list li span:last-child { color: var(--text-secondary); text-align: right; }

.erp-chart { display: flex; align-items: flex-end; gap: 0.75rem; height: 210px; padding-top: 0.75rem; }
.erp-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; height: 100%; }
.erp-bar-col small { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.erp-bar-col.current small { color: var(--accent); font-weight: 800; }
.erp-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.erp-bar { position: relative; width: 44%; max-width: 24px; height: 100%; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.erp-bar i { display: block; width: 100%; transition: height 0.3s; }
.erp-bar.in .real { background: #10b981; } .erp-bar.in .plan { background: rgba(16, 185, 129, 0.35); }
.erp-bar.out .real { background: #ef4444; } .erp-bar.out .plan { background: rgba(239, 68, 68, 0.35); }
.erp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.78rem; color: var(--text-secondary); }
.erp-legend span { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.erp-legend .in { background: #10b981; } .erp-legend .out { background: #ef4444; margin-left: 0.75rem; }
.erp-legend em { color: var(--text-muted); font-style: normal; margin-left: 0.75rem; }

/* modal de pedido */
.erp-items input, .erp-items select { width: 100%; padding: 0.5rem 0.65rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font: inherit; font-size: 0.85rem; }
.erp-items td { padding: 0.55rem; vertical-align: middle; }
.erp-items .it-qty, .erp-items .it-price { min-width: 86px; }
.erp-x { background: transparent; border: 0; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; line-height: 1; transition: color 0.15s; }
.erp-x:hover { color: #ef4444; }
.erp-total { font-size: 1.15rem; color: var(--text-primary); padding: 0.75rem 0; }
.erp-check { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.75rem 0; font-size: 0.88rem; color: var(--text-secondary); cursor: pointer; }
.erp-modal .modal-body input, .erp-modal .modal-body select, .erp-modal .modal-body textarea { width: 100%; }
.erp-modal .erp-check input { width: auto; margin-top: 0.2rem; }

@media (max-width: 860px) {
    .erp-grid-2 { grid-template-columns: 1fr; }
    .erp-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.6rem; }
    .erp-tab { white-space: nowrap; flex: 0 0 auto; }
}
@media (max-width: 560px) {
    .erp-modal .modal-grid-2 { grid-template-columns: 1fr; }
    .erp-cards { grid-template-columns: 1fr 1fr; }
    .erp-card { grid-template-columns: 1fr; row-gap: 0.35rem; }
    .erp-card i { grid-row: auto; }
}

/* ---- Notas fiscais, endereço com CEP e dados fiscais do produto ---- */
.erp-actions a { display: inline-block; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 8px; padding: 0.35rem 0.6rem; margin-left: 0.25rem; font-size: 0.78rem; text-decoration: none; transition: all 0.2s; }
.erp-actions a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.erp-note.warn { border-color: rgba(234, 179, 8, 0.45); background: rgba(234, 179, 8, 0.08); color: var(--text-primary); }
.erp-note.warn i { color: #eab308; }
.erp-details { margin: 0.9rem 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.9rem 0.9rem; }
.erp-details summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--text-primary); padding: 0.25rem 0 0.6rem; }
.erp-details[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 0.8rem; }
.erp-cep-row { display: flex; gap: 0.5rem; }
.erp-cep-row input { flex: 1; }
.erp-cep-row button { white-space: nowrap; }
.erp-modal .erp-details input, .erp-modal .erp-details select { width: 100%; }

/* ---- DRE Gerencial ---- */
.dre-table th, .dre-table td { padding: 0.75rem 0.95rem; }
.dre-table tbody tr:hover { background: rgba(0, 0, 0, 0.025); }
.dark-mode .dre-table tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
.dre-table td:first-child { font-weight: 600; min-width: 260px; }
/* ---- Calculadora ---- */
.kcalc { max-width: 940px; }
.kc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.kc-head .erp-h3 { margin: 0; }
.kc-tabs { display: inline-flex; gap: .35rem; padding: .25rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-input); max-width: 100%; overflow-x: auto; }
.kc-tab { flex: none; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: .85rem; font-weight: 600; padding: .5rem .95rem; border-radius: 999px; cursor: pointer; min-height: 40px; white-space: nowrap; }
.kc-tab:hover { color: var(--text-primary); }
.kc-tab.active { background: linear-gradient(135deg, var(--accent, #0284c7) 0%, #0369a1 100%); color: #fff; box-shadow: 0 3px 10px rgba(2, 132, 199, .3); }

.kc-basic { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.kc-main { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.04); outline: none; }
.kc-main:focus-visible { box-shadow: 0 0 0 3px rgba(2, 132, 199, .3); }
.kc-display { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .9rem; text-align: right; min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.kc-expr { color: var(--text-muted); font-size: .95rem; min-height: 1.3em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kc-out { color: var(--text-primary); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kc-out.kc-bad, .kc-bad { color: #ef4444; }
.kc-out.kc-bad { font-size: 1.05rem; }
.kc-mem { display: flex; align-items: center; gap: .35rem; margin: .65rem 0; flex-wrap: wrap; }
.kc-mem .kc-key { height: 34px; min-height: 34px; padding: 0 .55rem; font-size: .75rem; border-radius: 8px; }
.kc-mem .copy { margin-left: auto; }
.kc-mind { font-size: .75rem; color: var(--accent); font-weight: 700; }
.kc-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.kc-key { height: 54px; min-height: 48px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 1.15rem; font-weight: 600;
    cursor: pointer; touch-action: manipulation; transition: background .12s, transform .06s; user-select: none; }
.kc-key:hover { background: var(--bg-card-hover, rgba(127,127,127,.12)); }
.kc-key:active { transform: scale(.96); }
.kc-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kc-key.op { color: var(--accent); font-size: 1.3rem; background: rgba(2, 132, 199, .08); }
.kc-key.fn { color: var(--text-secondary); background: var(--bg-input); }
.kc-key.mem { font-weight: 700; color: var(--text-secondary); }
.kc-key.eq { grid-column: 1 / -1; background: linear-gradient(135deg, var(--accent, #0284c7) 0%, #0369a1 100%); color: #fff; border-color: transparent; font-size: 1.35rem; }
.kc-key.eq:hover { filter: brightness(1.08); }

.kc-hist { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 1rem; min-width: 0; }
.kc-hist-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.kc-link { background: none; border: 0; color: var(--text-muted); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; min-height: 32px; }
.kc-hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.kc-hist-empty { color: var(--text-muted); font-size: .85rem; padding: .75rem 0; }
.kc-hist-item { width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; padding: .55rem .4rem; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--text-primary); font: inherit; cursor: pointer; text-align: right; border-radius: 8px; }
.kc-hist-item:hover { background: var(--bg-input); }
.kc-h-expr { font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kc-h-res { font-weight: 700; font-variant-numeric: tabular-nums; }

.kc-panel { max-width: 760px; }
.kc-lead { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; margin: 0 0 1rem; }
.kc-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: .2rem; background: var(--bg-input); margin-bottom: 1rem; }
.kc-toggle button { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: .85rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px; cursor: pointer; min-height: 40px; }
.kc-toggle button.on { background: var(--accent, #0284c7); color: #fff; }
.kc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.kc-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.kc-field[hidden], .kc-res[hidden] { display: none; }
.kc-label { font-size: .82rem; font-weight: 600; color: var(--text-secondary); }
.kc-input { display: flex; align-items: center; gap: .4rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 0 .75rem; }
.kc-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(2, 132, 199, .15); }
.kc-input input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 1rem; padding: .7rem 0; outline: none; }
.kc-input em { font-style: normal; color: var(--text-muted); font-size: .85rem; }
.kc-field small { color: var(--text-muted); font-size: .75rem; line-height: 1.35; }
.kc-results, .kc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: .35rem 1rem; }
.kc-res { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--text-secondary); }
.kc-res:last-child { border-bottom: 0; }
.kc-res b { color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.kc-res.strong b { font-size: 1.25rem; font-weight: 800; }
.kc-res b.kc-bad { color: #ef4444; }
.kc-note { color: var(--text-muted); font-size: .78rem; line-height: 1.5; margin: .85rem 0 0; }
.kc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.kc-card { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.kc-card h4 { margin: 0; font-size: .95rem; color: var(--text-primary); }
.kc-card .kc-res { padding: .5rem 0 0; border: 0; }

@media (max-width: 760px) {
    .kc-basic { grid-template-columns: 1fr; }
    .kc-main { max-width: 420px; width: 100%; margin: 0 auto; }
    .kc-hist-list { max-height: 260px; }
    .kc-out { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .kc-key { transition: none; } }