:root {
    --primary: #ea580c; --primary-hover: #c2410c; --bg-dark: #0f0f12;
    --bg-light: #f5f5f7; --card-bg: #ffffff; --text-main: #1a1a2e;
    --text-muted: #6b7280; --border: #e5e7eb; --success: #16a34a;
    --blue: #2563eb; --purple: #8b5cf6; --warning: #f59e0b; --whatsapp: #25D366;
    --glass: rgba(255,255,255,0.7);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --radius: 16px;
    --radius-sm: 10px;

    /* Variáveis do Modo Layout (Zoom) */
    --shelf-slot-size: 45px;
    --shelf-font-size: 11px;
    --shelf-gap: 20px;
    --card-padding: 15px;
    --shelf-min-width: 250px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', 'Segoe UI', sans-serif; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--bg-light); color: var(--text-main); height: 100vh; display: flex; overflow: hidden; }

/* Layout e Sidebar */
.app-container { display: flex; width: 100%; height: 100%; transition: 0.3s; }
aside { width: 260px; background: linear-gradient(180deg, #0f0f12 0%, #1a1a2e 100%); color: #a1a1aa; display: flex; flex-direction: column; flex-shrink: 0; z-index: 100; transition: transform 0.3s ease; }
aside .brand { padding: 24px 20px; font-size: 22px; font-weight: 800; color: white; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; align-items: center; letter-spacing: -0.5px; }
aside .brand span { color: var(--primary); }
aside nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
aside button { width: 100%; background: none; border: none; color: inherit; padding: 12px 16px; text-align: left; cursor: pointer; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; gap: 12px; transition: all 0.2s; }
aside button:hover { background: rgba(255,255,255,0.06); color: white; }
aside button.active { background: rgba(234,88,12,0.12); color: var(--primary); font-weight: 600; border-left: 3px solid var(--primary); }
aside .footer { padding: 20px; border-top: 1px solid rgba(255,255,255,0.06); }

/* Main Content */
.mobile-header { display: none; padding: 15px; background: var(--bg-dark); color: white; align-items: center; justify-content: space-between; width: 100%; }
main { flex: 1; overflow-y: auto; padding: 30px; position: relative; width: 100%; background: var(--bg-light); }
.container { max-width: 1280px; margin: 0 auto; }
h2 { font-size: 28px; margin-bottom: 5px; font-weight: 800; letter-spacing: -0.5px; color: var(--text-main); }
.dash-title { font-size: 30px; font-weight: 900; letter-spacing: -1px; }
p.subtitle { color: var(--text-muted); margin-bottom: 25px; font-size: 14px; }
.card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 20px; transition: box-shadow 0.2s, transform 0.2s; }
.card:hover { box-shadow: var(--shadow-md); }

/* ============================================ */
/*         DASHBOARD MODERNO                     */
/* ============================================ */

.dash-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; flex-wrap: wrap; gap: 15px; }
.dash-header-actions { display: flex; gap: 10px; }

/* KPI Cards Modernos */
.kpi-grid-modern { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }

.kpi-card-modern {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.kpi-card-modern:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kpi-card-modern::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius) var(--radius) 0 0;
}
.kpi-received::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.kpi-stock::before { background: linear-gradient(90deg, #ea580c, #fb923c); }
.kpi-shipments::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.kpi-pending::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.kpi-card-inner { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.kpi-icon-modern {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-icon-modern .material-icons { font-size: 24px; }
.kpi-received .kpi-icon-modern { background: #f5f3ff; color: #8b5cf6; }
.kpi-stock .kpi-icon-modern { background: #fff7ed; color: #ea580c; }
.kpi-shipments .kpi-icon-modern { background: #eff6ff; color: #2563eb; }
.kpi-pending .kpi-icon-modern { background: #fffbeb; color: #f59e0b; }

.kpi-info { display: flex; flex-direction: column; }
.kpi-label { font-size: 12px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-number { font-size: 32px; font-weight: 900; color: var(--text-main); line-height: 1.1; letter-spacing: -1px; }

.kpi-trend { margin-bottom: 6px; }
.trend-up { display: inline-flex; align-items: center; gap: 3px; color: #16a34a; font-size: 12px; font-weight: 700; background: #f0fdf4; padding: 2px 8px; border-radius: 20px; }
.trend-down { display: inline-flex; align-items: center; gap: 3px; color: #ef4444; font-size: 12px; font-weight: 700; background: #fef2f2; padding: 2px 8px; border-radius: 20px; }
.trend-neutral { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.trend-up .material-icons, .trend-down .material-icons, .trend-neutral .material-icons { font-size: 14px; }

.kpi-sparkline { height: 40px; margin-top: 4px; }

/* Occupancy bar in KPI */
.kpi-occupancy { margin-top: 4px; }
.occupancy-bar { height: 6px; background: #f3f4f6; border-radius: 3px; overflow: hidden; }
.occupancy-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease, background 0.3s; }
.occupancy-text { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 4px; display: block; }

/* Charts Grid */
.charts-grid-modern { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; }
.chart-card { padding: 24px; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.chart-header h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-main); }
.chart-header h3 .material-icons { font-size: 20px; color: var(--text-muted); }
.chart-container { height: 280px; position: relative; }
.chart-container-donut { height: 280px; position: relative; }
.chart-period-select { padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; font-weight: 500; background: #f9fafb; color: var(--text-main); cursor: pointer; }
.chart-badge { background: var(--text-main); color: white; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }

.donut-center { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.donut-total { display: block; font-size: 36px; font-weight: 900; color: var(--text-main); line-height: 1; }
.donut-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }

/* KPI Toggle Buttons */
.kpi-toggle-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}
.kpi-toggle {
    padding: 3px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--text-muted);
    transition: all 0.2s;
}
.kpi-toggle.active {
    background: var(--text-main);
    color: white;
    border-color: var(--text-main);
}
.kpi-toggle:hover:not(.active) { background: #f3f4f6; }

/* ============================================ */
/*    BRAZIL MAP - Dark Theme Interactive        */
/* ============================================ */

/* ============================================ */
/*         BRAZIL MAP - Modern Dark Card         */
/* ============================================ */

.map-dark-card {
    background: linear-gradient(145deg, #0c1222, #162032, #1a2744);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    border: 1px solid rgba(99,102,241,0.15);
}
.map-dark-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    min-height: 420px;
}

/* Left - SVG Map */
.map-left {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: radial-gradient(ellipse at 50% 50%, rgba(99,102,241,0.08) 0%, transparent 70%);
}
#map-svg-container svg {
    width: 100%;
    height: 100%;
    max-height: 380px;
    filter: drop-shadow(0 4px 20px rgba(99,102,241,0.1));
    position: relative;
    z-index: 1;
}
#map-svg-container svg path {
    transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}

/* Map Tooltip */
.map-tooltip {
    position: absolute;
    z-index: 30;
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 10px;
    padding: 8px 14px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.map-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.map-tooltip strong {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
}
.map-tooltip-count {
    color: #a78bfa;
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
}

/* Right - Info panel */
.map-right {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.1);
    overflow-y: auto;
    max-height: 420px;
}
.map-info-default {
    text-align: center;
    color: #94a3b8;
}
.map-default-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    border: 1px solid rgba(99,102,241,0.2);
}
.map-default-icon .material-icons { font-size: 28px; color: #818cf8; }
.map-info-default h3 { color: #e2e8f0; font-size: 20px; margin-bottom: 8px; font-weight: 700; }
.map-info-default p { font-size: 13px; line-height: 1.6; margin-bottom: 28px; color: #64748b; }

.map-stats-row {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.map-stat-mini {
    text-align: center;
    background: rgba(255,255,255,0.04);
    padding: 18px 28px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(4px);
    transition: all 0.2s;
}
.map-stat-mini:hover { background: rgba(255,255,255,0.07); border-color: rgba(99,102,241,0.3); }
.map-stat-val {
    display: block;
    font-size: 32px;
    font-weight: 900;
    color: #e2e8f0;
    letter-spacing: -1px;
}
.map-stat-lbl {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

/* State Info Panel */
.map-info-state { position: relative; animation: mapFadeIn 0.4s ease; }
@keyframes mapFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Floating State Overlay (on top of SVG map) */
.map-state-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 45%, rgba(99,102,241,0.18) 0%, rgba(12,18,34,0.92) 65%);
    backdrop-filter: blur(6px);
    animation: overlayFadeIn 0.4s ease;
    gap: 8px;
}
.map-state-overlay.hidden { display: none; }
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }

.map-overlay-close {
    position: absolute;
    top: 16px; right: 16px; z-index: 5;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #94a3b8;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.map-overlay-close:hover { background: rgba(239,68,68,0.2); color: #f87171; border-color: rgba(239,68,68,0.4); }
.map-overlay-close .material-icons { font-size: 20px; }

.map-overlay-img {
    max-width: 180px;
    max-height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 0 25px rgba(99,102,241,0.6)) drop-shadow(0 0 60px rgba(139,92,246,0.3)) brightness(1.4);
    animation: holoFloat 3s ease-in-out infinite;
    transition: opacity 0.4s;
}
@keyframes holoFloat {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 25px rgba(99,102,241,0.5)) drop-shadow(0 0 60px rgba(139,92,246,0.25)) brightness(1.4); }
    50% { transform: translateY(-12px) scale(1.04); filter: drop-shadow(0 0 40px rgba(99,102,241,0.8)) drop-shadow(0 0 80px rgba(139,92,246,0.4)) brightness(1.6); }
}

.map-overlay-badge {
    margin-top: 4px;
}
.map-overlay-badge span {
    display: inline-block;
    background: rgba(99,102,241,0.15);
    color: #a78bfa;
    padding: 4px 16px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
    border: 1px solid rgba(99,102,241,0.25);
    letter-spacing: 1.5px;
}

.map-overlay-name {
    font-size: 22px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 12px rgba(99,102,241,0.4);
}

/* Right panel state header */
.map-state-header { margin-bottom: 14px; }
.map-state-title {
    font-size: 24px;
    font-weight: 900;
    color: #f1f5f9;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 2px;
}

/* Info section */
.map-holo-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #a78bfa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.map-holo-live .material-icons { animation: pulse-yellow 1s infinite; }
.map-holo-count {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-left: 2px solid #6366f1;
    padding-left: 8px;
}

/* Stats grid */
.map-holo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.map-holo-stat {
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: border-color 0.2s;
}
.map-holo-stat:hover { border-color: rgba(255,255,255,0.12); }
.map-holo-stat-label {
    display: block;
    font-size: 9px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    font-weight: 600;
}
.map-holo-stat-val {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    font-family: monospace;
}

/* Shipments header */
.map-holo-shipments-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Shipment items */
.map-ship-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 3px;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid transparent;
    transition: all 0.15s;
}
.map-ship-item:hover { background: rgba(255,255,255,0.06); border-left-color: #6366f1; }
.map-ship-left { display: flex; gap: 10px; align-items: center; }
.map-ship-selb { font-size: 13px; font-weight: 800; color: #e2e8f0; font-family: monospace; }
.map-ship-model { font-size: 11px; color: #64748b; }
.map-ship-right { text-align: right; }
.map-ship-chamado { font-size: 11px; color: #94a3b8; display: block; }
.map-ship-date { font-size: 10px; color: #475569; }
.map-state-shipments { max-height: 160px; overflow-y: auto; }
.map-state-shipments::-webkit-scrollbar { width: 3px; }
.map-state-shipments::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

@media (max-width: 768px) {
    .map-dark-inner { grid-template-columns: 1fr; }
    .map-left { min-height: 240px; padding: 20px; }
    .map-right { padding: 20px; max-height: none; }
}

/* Activity Feed */
.activity-feed { max-height: 380px; overflow-y: auto; }
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f3f4f6; transition: background 0.15s; }
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: #fafafa; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.activity-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-icon .material-icons { font-size: 18px; }
.activity-content { flex: 1; min-width: 0; }
.activity-text { font-size: 13px; color: var(--text-main); line-height: 1.4; }
.activity-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.activity-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.activity-empty p { margin-top: 8px; font-size: 13px; }

/* Insights */
.insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.insight-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.insight-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.insight-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.insight-icon .material-icons { font-size: 20px; }
.insight-body { flex: 1; }
.insight-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
.insight-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* ============================================ */
/*         PRATELEIRAS MODERNAS                  */
/* ============================================ */

.stock-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; min-height: 40px; }
.stock-header-left { display: flex; align-items: center; gap: 15px; }
.stock-toolbar { display: flex; gap: 8px; align-items: center; }

/* Quick stats bar */
.stock-stats-bar {
    display: flex;
    gap: 24px;
    padding: 14px 20px;
    background: var(--card-bg);
    border-radius: var(--radius);
    margin-bottom: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.stock-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.stock-stat .material-icons { font-size: 18px; }
.stock-stat span:nth-child(2) { font-size: 20px; font-weight: 800; }

/* Filters modernos */
.stock-filters-modern {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.filter-search-box {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.filter-search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(234,88,12,0.1); }
.filter-search-box .material-icons { color: var(--text-muted); font-size: 20px; }
.filter-search-box input { border: none !important; margin: 0 !important; padding: 12px 0 !important; box-shadow: none !important; font-size: 14px; }
.filter-search-box input:focus { box-shadow: none !important; }

.filter-select-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 14px;
}
.filter-select-box .material-icons { color: var(--text-muted); font-size: 20px; }
.filter-select-box select { border: none !important; margin: 0 !important; padding: 12px 0 !important; box-shadow: none !important; min-width: 180px; font-size: 14px; background: transparent; }

.bulk-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #93c5fd;
    border-radius: var(--radius);
    margin-bottom: 16px;
    animation: fadeIn 0.3s;
}
.count-badge { background: var(--blue); color: white; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }

/* ============================================ */
/*         3D WAREHOUSE RACK SYSTEM              */
/* ============================================ */

.shelves-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
    align-items: start;
}

/* Rack Card Container */
.rack-3d {
    background: linear-gradient(180deg, #e8ecf1 0%, #d1d5db 100%);
    border-radius: var(--radius);
    border: 1px solid #c9cdd3;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.5);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    animation: fadeIn 0.4s;
    position: relative;
}
.rack-3d::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 48%,
        rgba(0,0,0,0.02) 48%,
        rgba(0,0,0,0.02) 52%,
        transparent 52%
    );
    pointer-events: none;
    z-index: 0;
}
.rack-3d:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* Rack Header */
.rack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e3a5f, #1a365d);
    color: white;
    position: relative;
    z-index: 1;
}
.rack-header-left { display: flex; align-items: center; gap: 10px; }
.rack-header-icon { font-size: 20px; color: #93c5fd; }
.rack-header h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.rack-dim { font-size: 10px; background: rgba(255,255,255,0.15); padding: 2px 8px; border-radius: 4px; font-weight: 600; color: #93c5fd; }
.rack-header-right { display: flex; align-items: center; gap: 8px; }

/* Occupancy pill */
.rack-occ-pill {
    position: relative;
    width: 60px;
    height: 22px;
    background: rgba(0,0,0,0.3);
    border-radius: 11px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rack-occ-pill-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 11px;
    transition: width 0.5s;
}
.rack-occ-pill span {
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-weight: 800;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.rack-header .btn-icon-modern {
    background: rgba(255,255,255,0.1);
    color: #93c5fd;
    width: 28px; height: 28px;
    border-radius: 6px;
}
.rack-header .btn-icon-modern:hover { background: rgba(255,255,255,0.2); color: white; }
.rack-header .btn-icon-modern .material-icons { font-size: 16px; }

.btn-icon-modern {
    width: 32px; height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--text-muted);
}
.btn-icon-modern:hover { background: #e5e7eb; color: var(--text-main); }

/* Rack Scene - perspective container */
.rack-scene {
    padding: 16px 12px 12px;
    perspective: 900px;
    position: relative;
    z-index: 1;
}

/* Rack Structure */
.rack-structure {
    position: relative;
    transform: rotateX(2deg);
    transform-origin: center bottom;
}

/* Vertical frame posts */
.rack-frame {
    position: absolute;
    top: 0; bottom: 0;
    width: 8px;
    background: linear-gradient(180deg, #1e40af, #1e3a8a);
    border-radius: 2px;
    z-index: 2;
    box-shadow: 1px 0 3px rgba(0,0,0,0.15);
}
.rack-frame-left { left: 4px; }
.rack-frame-right { right: 4px; }

/* Each rack level (row) */
.rack-level {
    position: relative;
    padding: 0 16px;
    margin-bottom: 2px;
}

/* Level number label */
.rack-level-label {
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 9px;
    font-weight: 800;
    color: #1e3a8a;
    letter-spacing: 1px;
    z-index: 3;
    opacity: 0.6;
}

/* Horizontal beam */
.rack-beam {
    height: 5px;
    background: linear-gradient(180deg, #f59e0b, #d97706);
    border-radius: 1px;
    margin: 0 -4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.3);
    position: relative;
    z-index: 2;
}

/* Pallet row (columns) */
.rack-pallet-row {
    display: grid;
    gap: 6px;
    padding: 8px 4px 4px;
    position: relative;
}

/* Individual rack slot */
.rack-slot {
    position: relative;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 65px;
    transition: all 0.2s;
    border-radius: 4px;
}
.rack-slot:hover { transform: scale(1.03); }

/* Pallet base (wooden slats) */
.rack-pallet {
    width: 100%;
    height: 10px;
    background: linear-gradient(
        0deg,
        #b8860b 0%, #d4a843 15%, #c4943a 15%,
        #c4943a 30%, #deb96e 30%, #d4a843 30%,
        #d4a843 45%, #c4943a 45%, #b8860b 45%,
        #b8860b 60%, #d4a843 60%, #c4943a 60%,
        #c4943a 75%, #deb96e 75%, #d4a843 75%,
        #d4a843 100%
    );
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    position: relative;
    flex-shrink: 0;
}
.rack-pallet::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 8px,
        rgba(0,0,0,0.08) 8px,
        rgba(0,0,0,0.08) 9px
    );
    border-radius: 2px;
}
.rack-pallet-empty {
    opacity: 0.3;
}

/* 3D Box (occupied slot) */
.rack-box {
    position: relative;
    width: 90%;
    height: 46px;
    transform-style: preserve-3d;
    margin-bottom: 2px;
}
.rack-box-face {
    position: absolute;
    backface-visibility: hidden;
}
.rack-box-front {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #d4a843, #c4943a);
    border: 1px solid #b8860b;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.2);
    z-index: 1;
}
.rack-box-top {
    width: 100%;
    height: 8px;
    background: linear-gradient(180deg, #e8cc80, #d4a843);
    transform: rotateX(60deg);
    transform-origin: bottom;
    top: -6px;
    left: 0;
    border-radius: 2px 2px 0 0;
}
.rack-box-side {
    width: 10px;
    height: 100%;
    right: -8px;
    top: -3px;
    background: linear-gradient(90deg, #b8860b, #a0750a);
    transform: skewY(-10deg);
    border-radius: 0 3px 3px 0;
}
.rack-box-col {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.5px;
}
.rack-box-selb {
    font-size: 14px;
    font-weight: 900;
    color: #1a1a2e;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    letter-spacing: 0.5px;
    line-height: 1;
}
.rack-box-model {
    font-size: 8px;
    font-weight: 700;
    color: rgba(0,0,0,0.45);
    letter-spacing: 0.3px;
    margin-top: 1px;
    text-transform: uppercase;
}

/* Occupied slot hover effect */
.rack-slot.occupied:hover .rack-box-front {
    background: linear-gradient(145deg, #e8cc80, #d4a843);
    border-color: #ea580c;
    box-shadow: 0 0 12px rgba(234,88,12,0.3), inset 0 -2px 4px rgba(0,0,0,0.1);
}
.rack-slot.occupied:hover {
    z-index: 5;
}

/* Edit icon */
.rack-edit-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    background: rgba(37,99,235,0.9);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.rack-edit-icon .material-icons { font-size: 12px; }
.rack-slot:hover .rack-edit-icon { opacity: 1; }

/* Empty slot */
.rack-empty-slot {
    width: 90%;
    height: 46px;
    border: 2px dashed #9ca3af;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    background: rgba(255,255,255,0.3);
    transition: all 0.2s;
}
.rack-empty-col { font-size: 9px; font-weight: 600; color: #9ca3af; }
.rack-empty-icon { font-size: 18px; color: #9ca3af; transition: color 0.2s; }
.rack-slot:hover .rack-empty-slot {
    border-color: var(--primary);
    background: rgba(234,88,12,0.05);
}
.rack-slot:hover .rack-empty-icon { color: var(--primary); }

/* Column labels */
.rack-col-labels {
    display: grid;
    gap: 6px;
    padding: 6px 4px 0;
}
.rack-col-label {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #1e3a8a;
    background: rgba(30,58,138,0.08);
    padding: 2px 0;
    border-radius: 3px;
}

/* Rack floor */
.rack-floor {
    height: 8px;
    background: linear-gradient(180deg, #fbbf24, #d97706);
    margin: 0 -4px;
    border-radius: 2px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    position: relative;
}

/* Selection & highlight states on rack slots */
.rack-slot.highlight .rack-box-front {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px var(--blue), 0 0 16px rgba(37,99,235,0.3);
    animation: pulse 1.5s infinite;
}
.rack-slot.selected .rack-box-front {
    background: linear-gradient(145deg, #93c5fd, #60a5fa) !important;
    border-color: var(--blue) !important;
}
.rack-slot.selected .rack-box-selb { color: white; }

/* Drag states */
.rack-slot.dragging { opacity: 0.4; transform: scale(0.9); }
.rack-slot.drag-over .rack-empty-slot,
.rack-slot.drag-over .rack-box-front {
    border-color: var(--blue) !important;
    box-shadow: 0 0 16px rgba(37,99,235,0.4) !important;
}

/* Compat: old class names still used in layout mode */
.shelf-card-modern { overflow: hidden; animation: fadeIn 0.4s; }
.shelf-header-modern h3 { font-size: 15px; font-weight: 700; }

/* ============================================ */
/*         BOTÕES MODERNOS                       */
/* ============================================ */

/* Inputs & Buttons */
input, select, textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 14px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; color: var(--text-main); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1); }
.btn { padding: 10px 18px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 13px; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-sm { padding: 8px 14px; font-size: 12px; }
.btn-primary { background: linear-gradient(135deg, #ea580c, #dc2626); color: white; box-shadow: 0 2px 8px rgba(234,88,12,0.25); }
.btn-primary:hover { box-shadow: 0 4px 16px rgba(234,88,12,0.35); transform: translateY(-1px); }
.btn-secondary { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-secondary:hover { background: #f3f4f6; }
.btn-success { background: linear-gradient(135deg, #16a34a, #15803d); color: white; box-shadow: 0 2px 8px rgba(22,163,74,0.25); }
.btn-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; box-shadow: 0 2px 8px rgba(139,92,246,0.25); }
.btn-blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white; box-shadow: 0 2px 8px rgba(37,99,235,0.25); }
.btn-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); color: white; width: 100%; }

.btn-glass {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.06);
    color: var(--text-main);
    font-weight: 600;
}
.btn-glass:hover { background: rgba(255,255,255,0.95); box-shadow: var(--shadow-md); }

.btn-glow { position: relative; overflow: hidden; }
.btn-glow::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}
.btn-glow:hover::after { opacity: 1; }

/* Mass select button */
.btn-mass-select {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(79,70,229,0.25);
    transition: all 0.2s;
    cursor: pointer;
}
.btn-mass-select:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(79,70,229,0.35); }

/* ============================================ */
/*         SHARED COMPONENTS                     */
/* ============================================ */

/* KPIs antigos (para compat) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
.kpi-card { cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: transform 0.2s; }
.kpi-card:active { transform: scale(0.98); }
.kpi-value { font-size: 36px; font-weight: bold; color: var(--text-main); margin: 5px 0; }
.kpi-icon { width: 60px; height: 60px; background: #fff7ed; color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; }

/* Charts antigos */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; }
.chart-box { height: 300px; display: flex; justify-content: center; align-items: center; position: relative; }

/* Filters & Shelves */
.filter-group { display: flex; gap: 10px; margin-bottom: 15px; overflow-x: auto; padding-bottom: 5px; }
.filter-btn { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border); background: white; cursor: pointer; font-size: 13px; color: var(--text-muted); white-space: nowrap; transition: all 0.2s; font-weight: 500; }
.filter-btn:hover { background: #f9fafb; }
.filter-btn.active { background: var(--text-main); color: white; border-color: var(--text-main); }
.shelf-header { display: flex; justify-content: space-between; margin-bottom: 15px; align-items: center; border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; }

/* Table & Status */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; }
th { text-align: left; padding: 14px; background: #fafafa; border-bottom: 2px solid var(--border); color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; }
td { padding: 14px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
tr:hover td { background: #fafafa; }
.tracking-cell { font-family: 'JetBrains Mono', monospace; font-weight: 600; cursor: pointer; color: var(--text-main); display: flex; align-items: center; gap: 5px; font-size: 12px; }
.tracking-cell:hover { color: var(--primary); }
.status-badge { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; letter-spacing: 0.3px; }
.recv-pending { background-color: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.recv-stock { background-color: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.recv-shipped { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ship-delivered { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.ship-pickup { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.ship-transit { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.ship-pending { background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }
.ship-cancelled { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; border: 1px solid #fca5a5; }
.ship-returned { background: linear-gradient(135deg, #dbeafe, #c7d2fe); color: #3730a3; border: 1px solid #a5b4fc; }
.ship-pending-action {
    background: linear-gradient(135deg, #fff7ed, #fed7aa); color: #9a3412;
    border: 1px solid #fb923c; animation: pendingActionPulse 2s ease-in-out infinite;
}
@keyframes pendingActionPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,146,60,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(251,146,60,0); }
}

/* Cancelled return info badge in row (texto completo, multi-linha) */
.cancelled-info {
    margin-top: 6px; padding: 6px 8px; border-radius: 6px;
    background: rgba(239,68,68,0.06); border-left: 3px solid #ef4444;
    font-size: 10px; color: #7f1d1d; line-height: 1.4;
    max-width: 320px;
}
.cancelled-info b { color: #991b1b; }
.cancelled-info.returned { background: rgba(59,130,246,0.06); border-left-color: #3b82f6; color: #1e3a8a; }
.cancelled-info.returned b { color: #1e40af; }
.cancelled-info.pending-action { background: rgba(251,146,60,0.08); border-left-color: #f59e0b; color: #7c2d12; }
.cancelled-info.pending-action b { color: #9a3412; }

/* ============================================
   DRAWER DE ENVIO — Novo fluxo (estilo limpo)
   ============================================ */
.rcp-pane { animation: rcpFadeIn 0.25s ease-out; }
@keyframes rcpFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* STEP 1: dois cards bonitos pra escolher tipo de envio */
.rcp-choice-title {
    font-size: 14px; font-weight: 700; color: #1e293b;
    text-align: center; margin: 8px 0 18px;
    letter-spacing: -0.2px;
}
.rcp-choice-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 10px;
}
.rcp-choice-card {
    background: white; border: 2px solid #e5e7eb; border-radius: 14px;
    padding: 20px 12px; cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
}
.rcp-choice-card:hover {
    border-color: #c7d2fe; transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99,102,241,0.12);
}
.rcp-choice-ico {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: white; transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.rcp-choice-ico .material-icons { font-size: 28px !important; }
.rcp-choice-card:hover .rcp-choice-ico { transform: scale(1.05); }
.rcp-choice-name { font-size: 14px; font-weight: 800; color: #1e293b; }
.rcp-choice-desc { font-size: 11px; color: #64748b; line-height: 1.4; }

/* Botão "voltar" no topo de cada pane */
.rcp-back {
    background: none; border: none; color: #64748b;
    font-size: 12px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 6px; transition: all 0.15s;
    margin-bottom: 8px;
}
.rcp-back:hover { background: #f1f5f9; color: #1e293b; }
.rcp-back .material-icons { font-size: 16px !important; }

/* Header de pane */
.rcp-pane-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 800; color: #1e293b;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}
.rcp-pane-header .material-icons { font-size: 20px !important; }

.rcp-info-pill {
    display: flex; align-items: flex-start; gap: 8px;
    background: #eff6ff; border-left: 3px solid #3b82f6;
    padding: 10px 12px; border-radius: 6px; margin-bottom: 14px;
    font-size: 12px; color: #1e3a8a; line-height: 1.4;
}
.rcp-info-pill .material-icons { font-size: 15px !important; color: #2563eb; flex-shrink: 0; margin-top: 1px; }

.rcp-btn-confirm {
    margin-top: 12px;
    display: flex !important; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, var(--primary), #ea580c) !important;
    border: none; color: white !important; font-weight: 700;
    border-radius: 8px; padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(234,88,12,0.25);
    transition: all 0.2s;
}
.rcp-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(234,88,12,0.35); }
.rcp-btn-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

.rcp-spinner {
    width: 14px; height: 14px;
    border: 2px solid #e5e7eb; border-top-color: var(--primary);
    border-radius: 50%; animation: rcpSpin 0.7s linear infinite;
}
@keyframes rcpSpin { to { transform: rotate(360deg); } }
.rcp-spinner-inline {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: white;
    border-radius: 50%; animation: rcpSpin 0.7s linear infinite;
    margin-right: 6px; vertical-align: middle;
}

/* Multi-SELB toggle */
.rcp-multi-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border: 1.5px dashed #c7d2fe;
    border-radius: 8px; background: #faf9ff; cursor: pointer;
    transition: all 0.15s; color: #4f46e5; font-size: 12px; font-weight: 700;
}
.rcp-multi-toggle:hover { background: #eef2ff; }
.rcp-multi-toggle .material-icons { font-size: 16px; }
.rcp-multi-toggle-text { flex: 1; }
.rcp-multi-chevron { transition: transform 0.2s; }
.rcp-multi-toggle.expanded .rcp-multi-chevron { transform: rotate(180deg); }
.rcp-multi-list {
    margin-top: 8px; padding: 10px; background: #f8fafc;
    border: 1px solid #e5e7eb; border-radius: 8px;
    max-height: 200px; overflow-y: auto;
}
.rcp-multi-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; cursor: pointer;
    font-size: 12px; transition: background 0.1s;
}
.rcp-multi-item:hover { background: white; }
.rcp-multi-item input { accent-color: #6366f1; transform: scale(1.1); }
.rcp-multi-item-selb { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #1e293b; }
.rcp-multi-item-model { color: #64748b; font-size: 11px; margin-left: auto; }
.rcp-multi-empty { text-align: center; color: #94a3b8; font-size: 11px; padding: 12px; font-style: italic; }

/* Card de visualização (envio já salvo) — moderno */
.rcp-saved-card {
    background: white;
    border: 1px solid #e5e7eb; border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.sv-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    color: white;
}
.sv-header-correios {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}
.sv-header-maos {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.sv-header-icon {
    width: 42px; height: 42px; border-radius: 11px;
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    backdrop-filter: blur(8px);
}
.sv-header-icon .material-icons { font-size: 22px !important; color: white; }
.sv-header-text { flex: 1; min-width: 0; }
.sv-header-title { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.sv-header-sub { font-size: 11.5px; opacity: 0.9; margin-top: 2px; }
.sv-status-pill {
    padding: 4px 10px; border-radius: 99px;
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.3px;
    white-space: nowrap;
}

.sv-rastreio-box {
    margin: 14px 16px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px dashed #6ee7b7; border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.sv-rastreio-label {
    font-size: 9.5px; font-weight: 700; color: #047857;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.sv-rastreio-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px; font-weight: 900; color: #065f46;
    letter-spacing: 1.5px;
}

.sv-details { padding: 4px 16px 14px; }
.sv-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}
.sv-row:last-child { border-bottom: none; }
.sv-row-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; color: #64748b;
    flex-shrink: 0;
}
.sv-row-label .material-icons { font-size: 14px !important; color: #94a3b8; }
.sv-row-value {
    font-size: 12.5px; font-weight: 700; color: #1e293b;
    text-align: right; word-break: break-word;
    min-width: 0;
}
.sv-row-stack { flex-direction: column; gap: 4px; }
.sv-row-stack .sv-row-value { text-align: left; }

/* Bloco de Comodato no card de visualização */
.sv-comodato-box {
    margin: 14px 16px 16px;
    border-radius: 10px;
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.sv-comodato-pending-box {
    background: linear-gradient(135deg, #fef9c3, #fef3c7);
    border: 1px solid #fde68a;
}
.sv-comodato-signed {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7;
}
.sv-comodato-info-box {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 1px solid #c7d2fe;
}
.sv-comodato-info-box .sv-comodato-header > .material-icons {
    background: linear-gradient(135deg, #6366f1, #4f46e5); color: white;
    box-shadow: 0 3px 8px rgba(99,102,241,0.25);
}
.sv-comodato-info-box .sv-comodato-title { color: #312e81; }
.sv-comodato-info-box .sv-comodato-sub { color: #4338ca; }
.sv-comodato-info-box .sv-comodato-pending { background: rgba(255,255,255,0.6); color: #4338ca; line-height: 1.5; padding: 8px 10px; font-style: normal; text-align: left; font-size: 11px; }
.sv-comodato-header {
    display: flex; align-items: center; gap: 10px;
}
.sv-comodato-header > .material-icons {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px !important;
    flex-shrink: 0;
}
.sv-comodato-pending-box .sv-comodato-header > .material-icons {
    background: linear-gradient(135deg, #f59e0b, #d97706); color: white;
    box-shadow: 0 3px 8px rgba(245,158,11,0.25);
}
.sv-comodato-signed .sv-comodato-header > .material-icons {
    background: linear-gradient(135deg, #10b981, #059669); color: white;
    box-shadow: 0 3px 8px rgba(16,185,129,0.25);
}
.sv-comodato-title { font-size: 13px; font-weight: 800; }
.sv-comodato-pending-box .sv-comodato-title { color: #78350f; }
.sv-comodato-signed .sv-comodato-title { color: #065f46; }
.sv-comodato-sub { font-size: 11.5px; margin-top: 1px; }
.sv-comodato-pending-box .sv-comodato-sub { color: #92400e; }
.sv-comodato-signed .sv-comodato-sub { color: #047857; }

.sv-comodato-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 9px 12px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    text-decoration: none; border: none;
    transition: all 0.2s;
}
.sv-comodato-btn .material-icons { font-size: 15px !important; }
.sv-comodato-btn-primary {
    background: linear-gradient(135deg, #f59e0b, #d97706); color: white;
    box-shadow: 0 3px 10px rgba(245,158,11,0.25);
}
.sv-comodato-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(245,158,11,0.4); }
.sv-comodato-btn-secondary {
    background: white; color: #78350f;
    border: 1px solid #fcd34d;
}
.sv-comodato-btn-secondary:hover { background: #fefce8; border-color: #f59e0b; }
.sv-comodato-btn-success {
    background: linear-gradient(135deg, #10b981, #059669); color: white;
    box-shadow: 0 3px 10px rgba(16,185,129,0.25);
}
.sv-comodato-btn-success:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(16,185,129,0.4); color: white; }
.sv-comodato-btn-regen {
    background: #fff; color: #b45309; border: 1px solid #fcd34d;
}
.sv-comodato-btn-regen:hover { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.sv-comodato-btn-regen .material-icons { font-size: 15px !important; }
.sv-comodato-regen-hint {
    font-size: 10.5px; color: #a16207; text-align: center; margin-top: -2px;
}
.sv-comodato-pending {
    font-size: 11px; color: #92400e; font-style: italic; text-align: center;
    padding: 6px; background: rgba(255,255,255,0.5); border-radius: 6px;
}

/* Notificação de envio (WhatsApp) — status + "Reenviar notificação" */
.sv-notif {
    margin: 14px 16px 0; padding: 12px; border-radius: 12px;
    display: flex; flex-direction: column; gap: 10px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
}
.sv-notif-warn { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: #fdba74; }
.sv-notif-head { display: flex; align-items: center; gap: 10px; }
.sv-notif-head > .material-icons {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
    font-size: 18px !important; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 3px 8px rgba(34,197,94,.25);
}
.sv-notif-warn .sv-notif-head > .material-icons { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 3px 8px rgba(234,88,12,.28); }
.sv-notif-text { min-width: 0; }
.sv-notif-text b { display: block; font-size: 13px; font-weight: 800; color: #14532d; }
.sv-notif-text small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.4; color: #15803d; overflow-wrap: anywhere; }
.sv-notif-warn .sv-notif-text b { color: #7c2d12; }
.sv-notif-warn .sv-notif-text small { color: #9a3412; }
.sv-notif-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px;
    border: 1px solid #86efac; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
    color: #166534; background: #fff; transition: background .15s, transform .15s, box-shadow .15s;
}
.sv-notif-btn:hover { background: #f0fdf4; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,163,74,.15); }
.sv-notif-btn .material-icons { font-size: 16px !important; }
.sv-notif-warn .sv-notif-btn {
    border: 0; color: #fff; background: linear-gradient(135deg, #f97316, #ea580c); box-shadow: 0 3px 10px rgba(234,88,12,.3);
}
.sv-notif-warn .sv-notif-btn:hover { background: linear-gradient(135deg, #ea580c, #c2410c); box-shadow: 0 6px 16px rgba(234,88,12,.38); }

/* Verificação do ViPP (captcha) — no formulário de vincular cliente e no pop-up */
.vc-inline {
    margin: 4px 0 14px; padding: 12px; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc;
    transition: background .2s, border-color .2s;
}
.vc-inline-head { display: flex; align-items: center; gap: 10px; }
.vc-inline-ico {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
    font-size: 18px !important; color: #fff; background: #94a3b8;
}
.vc-inline-text b { display: block; font-size: 13px; font-weight: 800; color: #0f172a; }
.vc-inline-text small { display: block; margin-top: 1px; font-size: 11.5px; color: #64748b; }
.vc-inline-row { display: none; align-items: center; gap: 10px; margin-top: 10px; }
.vc-inline[data-state="captcha"] { border-color: #fdba74; background: #fff7ed; }
.vc-inline[data-state="captcha"] .vc-inline-ico { background: linear-gradient(135deg, #fb923c, #ea580c); }
.vc-inline[data-state="captcha"] .vc-inline-row { display: flex; }
.vc-inline[data-state="ok"] { padding: 8px 12px; border-color: #bbf7d0; background: #f0fdf4; }
.vc-inline[data-state="ok"] .vc-inline-ico { width: 26px; height: 26px; border-radius: 8px; font-size: 15px !important; background: #22c55e; }
.vc-inline[data-state="ok"] .vc-inline-text b { color: #14532d; }
.vc-inline[data-state="ok"] .vc-inline-text small { color: #15803d; }
.vc-inline[data-state="checking"] .vc-inline-ico { animation: spin 1.2s linear infinite; }
.vc-inline[data-state="offline"] { border-color: #fecaca; background: #fef2f2; }
.vc-inline[data-state="offline"] .vc-inline-ico { background: #ef4444; }

.vc-box {
    position: relative; flex-shrink: 0; width: 150px; height: 50px; border-radius: 10px; overflow: hidden;
    background: #fff; border: 1px solid #e2e8f0; transition: width .25s ease, height .25s ease;
}
.vc-box img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
/* Lupa: imagem maior, ocupando a largura toda (o campo desce pra linha de baixo) */
.vc-inline-row { flex-wrap: wrap; }
.vc-box.zoom { width: 100%; height: 120px; }
.vc-box.zoom img { cursor: zoom-out; }
.vc-modal .vc-box.zoom { width: 100%; height: 130px; }
/* Botões empilhados na borda direita (lupa em cima, trocar embaixo) pra cobrir pouco da imagem */
.vc-zoom {
    position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border: 0; border-radius: 6px; cursor: pointer;
    display: grid; place-items: center; color: #475569; background: rgba(255,255,255,.9); box-shadow: 0 1px 3px rgba(15,23,42,.15);
}
.vc-zoom:hover { color: #ea580c; }
.vc-zoom .material-icons { font-size: 15px; }
.vc-box img:not([src]) { visibility: hidden; }
.vc-box.loading img { opacity: .25; }
.vc-box.loading::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border: 2px solid #fdba74; border-top-color: #ea580c; border-radius: 50%; animation: spin .8s linear infinite;
}
.vc-trocar {
    position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; border: 0; border-radius: 6px; cursor: pointer;
    display: grid; place-items: center; color: #475569; background: rgba(255,255,255,.9); box-shadow: 0 1px 3px rgba(15,23,42,.15);
}
.vc-trocar:hover { color: #ea580c; }
.vc-trocar .material-icons { font-size: 15px; }
.vc-box img { padding-right: 22px; box-sizing: border-box; }
.vc-input {
    flex: 1; min-width: 0; height: 50px; padding: 0 12px; border-radius: 10px; border: 1px solid #fdba74; background: #fff;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; font-weight: 700; letter-spacing: 6px;
    text-transform: uppercase; text-align: center; color: #0f172a; outline: none;
}
.vc-input:focus { border-color: #ea580c; box-shadow: 0 0 0 3px rgba(234,88,12,.15); }
.vc-input::placeholder { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: #94a3b8; }
.vc-modal p { margin: 0 0 14px; font-size: 13.5px; color: #475569; }
.vc-modal .vc-box { width: 220px; height: 70px; margin: 0 auto 12px; }
.vc-modal .vc-input { width: 220px; flex: none; }

/* Diálogo "Reenviar notificação" */
.rn-wrap { text-align: left; font-size: 13px; color: #334155; }
.rn-lead { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: #475569; text-align: center; }
.rn-to { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.rn-to-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #25d366; }
.rn-to-ico .material-icons { font-size: 19px; }
.rn-to small { display: block; font-size: 11px; color: #15803d; }
.rn-to b { display: block; font-size: 15px; color: #14532d; font-variant-numeric: tabular-nums; }
.rn-card { margin-top: 10px; border: 1px solid #eef0f6; border-radius: 14px; overflow: hidden; }
.rn-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f1f5f9; }
.rn-row:last-child { border-bottom: 0; }
.rn-row span { font-size: 12px; font-weight: 600; color: #64748b; }
.rn-row b { font-size: 12.5px; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.rn-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .5px; }
.rn-hint { display: flex; gap: 6px; margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: #64748b; }
.rn-hint .material-icons { font-size: 15px; color: #94a3b8; margin-top: 1px; }
.rn-fail {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; text-align: left;
    font-size: 12.5px; line-height: 1.45; color: #7c2d12; background: #fff7ed; border: 1px solid #fdba74;
}
.rn-fail .material-icons { font-size: 20px; color: #ea580c; }

/* ============================================
   MODAL PREVIEW WHATSAPP (mensagem do comodato)
   ============================================ */
.wpp-swal-popup {
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.wpp-swal-popup .swal2-html-container { margin: 0 !important; padding: 0 !important; }
.wpp-swal-popup .swal2-close { color: white !important; top: 14px; right: 14px; }
.wpp-swal-popup .swal2-close:hover { color: white !important; }

.wpp-preview-modal {
    background: #efeae2; /* fundo do WhatsApp */
    text-align: left;
}
.wpp-preview-header {
    background: linear-gradient(135deg, #128c7e 0%, #075e54 100%);
    color: white;
    padding: 16px 20px;
    display: flex; align-items: center; gap: 12px;
}
.wpp-preview-header > .material-icons {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px !important;
}
.wpp-preview-title { font-size: 14px; font-weight: 800; }
.wpp-preview-sub { font-size: 11.5px; opacity: 0.85; margin-top: 1px; }

.wpp-preview-chat {
    padding: 20px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='2' cy='2' r='1' fill='%23d4cfc5'/></svg>");
    background-size: 40px 40px;
    min-height: 80px;
    display: flex; justify-content: flex-start;
}
.wpp-preview-bubble {
    background: white;
    border-radius: 8px 8px 8px 2px;
    padding: 8px 10px 6px;
    max-width: 80%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.13);
    position: relative;
}
.wpp-preview-bubble::before {
    content: '';
    position: absolute;
    bottom: 0; left: -7px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 8px 8px;
    border-color: transparent transparent white transparent;
}
.wpp-preview-text {
    font-size: 13.5px;
    line-height: 1.4;
    color: #111b21;
    font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
    word-wrap: break-word;
}
.wpp-preview-text b { font-weight: 700; }
.wpp-preview-time {
    font-size: 10px;
    color: #667781;
    text-align: right;
    margin-top: 2px;
}

.wpp-preview-actions {
    background: white;
    padding: 12px 16px 16px;
    display: flex; flex-direction: column; gap: 8px;
    border-top: 1px solid #e9edef;
}
.wpp-action {
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 11px;
    padding: 11px 14px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: all 0.15s;
    text-decoration: none;
    text-align: left;
    font-family: inherit;
}
.wpp-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.wpp-action > .material-icons {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: white; flex-shrink: 0;
    font-size: 18px !important;
}
.wpp-action-msg { border-color: #fcd34d; }
.wpp-action-msg:hover { border-color: #f59e0b; background: #fffbeb; }
.wpp-action-msg > .material-icons { background: linear-gradient(135deg, #f59e0b, #d97706); }

.wpp-action-link { border-color: #c7d2fe; }
.wpp-action-link:hover { border-color: #6366f1; background: #eef2ff; }
.wpp-action-link > .material-icons { background: linear-gradient(135deg, #6366f1, #4f46e5); }

.wpp-action-zap { border-color: #86efac; }
.wpp-action-zap:hover { border-color: #10b981; background: #ecfdf5; }
.wpp-action-zap > .material-icons { background: linear-gradient(135deg, #25d366, #128c7e); }

.wpp-action-title { font-size: 13px; font-weight: 700; color: #111b21; }
.wpp-action-sub { font-size: 11px; color: #667781; margin-top: 1px; }

/* ============================================
   MODAL HISTÓRICO DE MOVIMENTAÇÃO
   ============================================ */
.mov-popup {
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.mov-popup .swal2-html-container { margin: 0 !important; padding: 0 !important; }
.mov-popup .swal2-actions { padding: 12px 20px !important; background: #faf9ff; }

.mov-modal { text-align: left; }

.mov-header {
    padding: 18px 22px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    color: white;
    display: flex; align-items: center; gap: 12px;
    position: relative; overflow: hidden;
}
.mov-header::before {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.mov-header > .material-icons {
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px !important;
    backdrop-filter: blur(8px);
    position: relative; z-index: 1;
}
.mov-h-title { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; position: relative; z-index: 1; }
.mov-h-sub { font-size: 12px; opacity: 0.9; margin-top: 2px; position: relative; z-index: 1; }

.mov-list {
    padding: 18px 20px;
    max-height: 60vh; overflow-y: auto;
    background: white;
}

.mov-event {
    display: grid; grid-template-columns: 38px 1fr; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #f1f5f9;
    animation: rcpFadeIn 0.2s ease-out;
}
.mov-event:last-child { border-bottom: none; }

.mov-icon {
    width: 38px; height: 38px; border-radius: 10px;
    color: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mov-icon .material-icons { font-size: 18px !important; }

.mov-content { min-width: 0; }
.mov-title {
    font-size: 13px; font-weight: 700; color: #1e293b;
    margin-bottom: 2px;
}
.mov-selb {
    font-family: 'JetBrains Mono', monospace;
    color: #6366f1; font-weight: 800;
    background: #eef2ff; padding: 1px 6px;
    border-radius: 4px; font-size: 11.5px;
}
.mov-desc {
    font-size: 12px; color: #475569;
    line-height: 1.4; margin-top: 2px;
}
.mov-tags {
    display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px;
}
.mov-tag {
    background: #f1f5f9; color: #475569;
    padding: 2px 7px; border-radius: 5px;
    font-size: 10.5px; font-weight: 600;
}
.mov-tag-mono { font-family: 'JetBrains Mono', monospace; }
.mov-meta {
    display: flex; gap: 14px; margin-top: 6px;
    font-size: 11px; color: #94a3b8;
}
.mov-meta span { display: inline-flex; align-items: center; gap: 4px; }
.mov-meta .material-icons { font-size: 12px !important; color: #cbd5e1; }

.mov-empty {
    text-align: center; padding: 40px 16px; color: #94a3b8;
}
.mov-empty .material-icons {
    font-size: 48px !important; opacity: 0.4; display: block; margin: 0 auto 10px;
}
.mov-empty p { font-size: 13px; margin: 0; }

/* ============================================
   LOGIN MODERNO
   ============================================ */
.login-card {
    background: white;
    border-radius: 20px;
    padding: 32px 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 60px rgba(99,102,241,0.15), 0 8px 24px rgba(234,88,12,0.08);
    border: 1px solid rgba(255,255,255,0.8);
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #f59e0b, #8b5cf6, #6366f1);
    background-size: 200% 100%;
    animation: loginShimmer 4s linear infinite;
}
@keyframes loginShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.login-brand {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}
.login-brand-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, #c2410c 100%);
    color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(234,88,12,0.3);
    flex-shrink: 0;
}
.login-brand-icon .material-icons { font-size: 26px !important; }
.login-brand-title {
    font-size: 22px; font-weight: 900; color: #0f172a;
    letter-spacing: -0.5px; margin: 0;
}
.login-brand-sub {
    font-size: 12px; color: #64748b;
    margin: 2px 0 0; font-weight: 500;
}

.login-form { display: flex; flex-direction: column; gap: 12px; }

.login-tip {
    display: flex; align-items: flex-start; gap: 10px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid #c7d2fe;
    border-left: 3px solid #6366f1;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 6px;
}
.login-tip .material-icons {
    color: #6366f1;
    font-size: 20px !important;
    flex-shrink: 0;
    margin-top: 1px;
}
.login-tip > div { font-size: 12px; line-height: 1.5; color: #4338ca; }
.login-tip b { display: block; color: #312e81; margin-bottom: 1px; }
.login-tip span { color: #6366f1; font-size: 11.5px; }

.login-first-banner {
    display: flex; align-items: flex-start; gap: 10px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fed7aa;
    border-left: 3px solid var(--primary);
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 4px;
}
.login-first-banner .material-icons {
    color: var(--primary); font-size: 20px !important;
    flex-shrink: 0; margin-top: 1px;
}
.login-first-banner > div { font-size: 12px; line-height: 1.5; color: #9a3412; }
.login-first-banner b { display: block; color: #78350f; margin-bottom: 1px; }
.login-first-banner span { font-size: 11.5px; color: #c2410c; }

.login-first-user {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11.5px;
    color: #64748b;
    text-align: center;
}
.login-first-user b { color: #1e293b; font-family: 'JetBrains Mono', monospace; }

.login-label {
    font-size: 10.5px; font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
    margin-bottom: -4px;
}

.login-user-wrap {
    display: flex; align-items: center; gap: 8px;
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 12px;
    transition: all 0.15s;
}
.login-user-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(234,88,12,0.08);
}
.login-user-wrap > .material-icons {
    font-size: 18px !important;
    color: #94a3b8;
    flex-shrink: 0;
}
.login-user-wrap:focus-within > .material-icons { color: var(--primary); }
.login-user-wrap input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    flex: 1;
    padding: 12px 0 !important;
    margin: 0 !important;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    min-width: 0;
}
.login-user-suffix {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.login-error {
    display: flex; align-items: center; gap: 6px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
}
.login-error::before {
    content: 'error_outline';
    font-family: 'Material Icons';
    font-size: 16px;
}

.login-btn {
    background: linear-gradient(135deg, var(--primary), #c2410c);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 6px 16px rgba(234,88,12,0.28);
    transition: all 0.2s;
    margin-top: 8px;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(234,88,12,0.4); }
.login-btn:active { transform: translateY(0); }
.login-btn .material-icons { font-size: 17px !important; }

.login-footer {
    text-align: center;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}

@media (max-width: 480px) {
    .login-card { padding: 24px 20px; border-radius: 16px; }
    .login-brand-title { font-size: 20px; }
    .login-brand-icon { width: 44px; height: 44px; }
}

/* ============================================
   MODAL "SISTEMA ATUALIZADO" (deploy novo detectado)
   ============================================ */
.update-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 99999;
    animation: updateFadeIn 0.3s ease-out;
    padding: 20px;
}
.update-overlay.show { display: flex; }
@keyframes updateFadeIn { from { opacity: 0; } to { opacity: 1; } }

.update-card {
    background: white;
    border-radius: 22px;
    padding: 34px 28px 28px;
    width: 100%; max-width: 440px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    animation: updateSlide 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes updateSlide {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.update-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), #f59e0b, #10b981, #6366f1, #8b5cf6);
    background-size: 300% 100%;
    animation: updateShimmer 3s linear infinite;
}
@keyframes updateShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.update-icon-wrap {
    position: relative;
    width: 80px; height: 80px;
    margin: 0 auto 18px;
}
.update-icon {
    width: 80px; height: 80px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--primary) 0%, #ea580c 50%, #c2410c 100%);
    color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px rgba(234,88,12,0.4);
    position: relative;
    z-index: 2;
    animation: updateIconBounce 1.8s cubic-bezier(0.36, 0, 0.66, -0.56) infinite;
}
.update-icon .material-icons { font-size: 42px !important; }
@keyframes updateIconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.update-pulse {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: var(--primary);
    opacity: 0.3;
    z-index: 1;
    animation: updatePulse 2s ease-out infinite;
}
@keyframes updatePulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

.update-title {
    font-size: 24px; font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin: 0 0 10px;
}
.update-sub {
    font-size: 14px; color: #475569;
    line-height: 1.6;
    margin: 0 0 20px;
}
.update-sub b { color: var(--primary); }

.update-version-box {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.update-version-box .material-icons {
    font-size: 16px !important;
    color: #94a3b8;
}
.update-version-box code {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 2px 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #1e293b;
    font-weight: 700;
}

.update-btn {
    background: linear-gradient(135deg, var(--primary), #ea580c);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 8px 22px rgba(234,88,12,0.4);
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}
.update-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(234,88,12,0.55);
}
.update-btn:active { transform: translateY(0); }
.update-btn .material-icons { font-size: 18px !important; }

.update-shortcut {
    font-size: 11px; color: #94a3b8;
    margin: 14px 0 0;
}
.update-shortcut kbd {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    padding: 2px 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #475569;
    box-shadow: 0 1px 0 #cbd5e1;
    margin: 0 2px;
}

@media (max-width: 480px) {
    .update-card { padding: 28px 22px 22px; border-radius: 18px; }
    .update-title { font-size: 20px; }
    .update-icon, .update-icon-wrap { width: 64px; height: 64px; }
    .update-icon { border-radius: 18px; }
    .update-icon .material-icons { font-size: 32px !important; }
}

/* ============================================
   BOTÃO "HISTÓRICO COMPLETO" + MODAL DE AUDITORIA
   ============================================ */
.btn-audit-history {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    transition: all 0.2s;
}
.btn-audit-history:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99,102,241,0.4);
}

.audit-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 99998;
    padding: 20px;
    animation: updateFadeIn 0.25s ease-out;
}
.audit-overlay.open { display: flex; }

.audit-modal {
    background: white;
    border-radius: 18px;
    width: 100%; max-width: 880px;
    max-height: 88vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 70px rgba(0,0,0,0.35);
    animation: updateSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.audit-header {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between;
    color: white;
    position: relative; overflow: hidden;
}
.audit-header::before {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.audit-header-left {
    display: flex; align-items: center; gap: 12px;
    position: relative; z-index: 1;
}
.audit-h-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px !important;
    backdrop-filter: blur(8px);
}
.audit-h-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.audit-h-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.audit-close {
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25);
    color: white; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; position: relative; z-index: 1;
}
.audit-close:hover { background: rgba(255,255,255,0.28); transform: rotate(90deg); }

.audit-date-bar {
    padding: 12px 18px;
    background: #fafbff;
    border-bottom: 1px solid #eef0ff;
}
.audit-date-chips {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.audit-date-chip {
    background: white;
    border: 1px solid #e5e7eb;
    color: #475569;
    font-size: 12px; font-weight: 700;
    padding: 6px 12px;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.audit-date-chip:hover { border-color: #c7d2fe; color: #4338ca; }
.audit-date-chip.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}
.audit-date-chip-custom .material-icons { font-size: 14px !important; }

.audit-date-custom {
    display: flex; gap: 10px; align-items: center;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    flex-wrap: wrap;
}
.audit-date-custom label {
    font-size: 11.5px; font-weight: 600; color: #64748b;
    display: inline-flex; align-items: center; gap: 6px;
}
.audit-date-custom input[type="date"] {
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px; font-weight: 600;
    color: #1e293b;
    margin: 0;
}
.audit-date-custom input[type="date"]:focus { outline: none; border-color: #6366f1; }
.audit-date-apply {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white; border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.audit-date-apply:hover { transform: translateY(-1px); }

.audit-loading-spinner {
    width: 28px; height: 28px;
    border: 3px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: rcpSpin 0.7s linear infinite;
    margin: 0 auto 12px;
}

.audit-filters {
    padding: 14px 18px;
    display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
    background: #faf9ff;
    border-bottom: 1px solid #eef0ff;
}
.audit-search-wrap {
    display: flex; align-items: center; gap: 8px;
    background: white; border: 1.5px solid #e5e7eb; border-radius: 9px;
    padding: 0 12px;
    transition: all 0.15s;
}
.audit-search-wrap:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.audit-search-wrap > .material-icons { font-size: 16px !important; color: #94a3b8; }
.audit-search-wrap input {
    flex: 1; border: none !important; outline: none !important;
    padding: 9px 0 !important; margin: 0 !important;
    font-size: 13px; font-weight: 500; color: #1e293b; background: transparent !important;
}
.audit-filters select {
    background: white; border: 1.5px solid #e5e7eb; border-radius: 9px;
    padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: #475569;
    margin: 0; cursor: pointer;
}
.audit-filters select:focus { outline: none; border-color: #6366f1; }

.audit-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 18px 18px;
}

.audit-event {
    display: grid; grid-template-columns: 38px 1fr; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    animation: updateFadeIn 0.2s ease-out;
}
.audit-event:last-child { border-bottom: none; }
.aud-icon {
    width: 38px; height: 38px; border-radius: 10px;
    color: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.aud-icon .material-icons { font-size: 18px !important; }
.aud-content { min-width: 0; }
.aud-top {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.aud-tipo-badge {
    font-size: 9.5px; font-weight: 800;
    padding: 2px 8px; border-radius: 99px;
    text-transform: uppercase; letter-spacing: 0.3px;
    white-space: nowrap;
}
.aud-desc {
    font-size: 13px; font-weight: 600; color: #1e293b;
    flex: 1;
}
.aud-ctx {
    display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
}
.aud-ctx-tag {
    background: #f1f5f9; color: #475569;
    font-size: 10.5px; font-weight: 500;
    padding: 1px 7px; border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}
.aud-ctx-tag b { color: #1e293b; font-weight: 700; }
.aud-meta {
    display: flex; gap: 14px; margin-top: 4px;
    font-size: 11px; color: #94a3b8;
}
.aud-meta span { display: inline-flex; align-items: center; gap: 4px; }
.aud-meta .material-icons { font-size: 12px !important; color: #cbd5e1; }

.audit-empty {
    text-align: center; padding: 50px 16px; color: #94a3b8;
}
.audit-empty .material-icons {
    font-size: 56px !important; opacity: 0.4; display: block; margin: 0 auto 12px;
}
.audit-empty p { font-size: 13px; margin: 0; }

@media (max-width: 768px) {
    .audit-filters { grid-template-columns: 1fr; }
    .audit-modal { max-height: 95vh; border-radius: 14px; }
}

/* ============================================
   VIPP — Geração de Postagem (estilo refinado)
   ============================================ */
.vipp-hero {
    position: relative;
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 16px;
    overflow: hidden;
    color: white;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    box-shadow: 0 8px 24px rgba(99,102,241,0.22);
}
.vipp-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,0.18), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(255,255,255,0.1), transparent 50%);
    pointer-events: none;
}
.vipp-hero-content {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 14px;
}
.vipp-hero-icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: rgba(255,255,255,0.18); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vipp-hero-icon .material-icons { font-size: 24px !important; color: white; }
.vipp-hero-title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; margin: 0; color: white; }
.vipp-hero-sub { font-size: 12px; opacity: 0.88; margin: 3px 0 0 0; line-height: 1.35; }
.vipp-hero-status {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.18); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 5px 11px; border-radius: 99px;
    font-size: 11px; font-weight: 700; color: white;
    transition: all 0.2s; white-space: nowrap;
}
.vipp-hero-status .material-icons { font-size: 10px !important; color: #10b981; }
.vipp-hero-status.vipp-state-loading .material-icons { color: #fbbf24; animation: vippBlink 1s infinite; }
.vipp-hero-status.vipp-state-error .material-icons { color: #f87171; }
.vipp-hero-status.vipp-state-ok .material-icons { color: #34d399; }
@keyframes vippBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.vipp-version-badge { display: none; }
.vipp-session-info { display: none !important; }

/* Etiquetas pendentes (mais limpo e elegante) */
.vipp-pending-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    animation: rcpFadeIn 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(245,158,11,0.08);
}
.vipp-pending-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.vipp-pending-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706); color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(245,158,11,0.25);
}
.vipp-pending-icon .material-icons { font-size: 18px !important; }
.vipp-pending-title { font-size: 14px; font-weight: 800; color: #78350f; }
.vipp-pending-sub { font-size: 11.5px; color: #92400e; margin-top: 1px; }
.vipp-pending-print-all {
    background: linear-gradient(135deg, #10b981, #059669); color: white;
    border: none; border-radius: 8px; padding: 8px 14px;
    font-size: 11.5px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 3px 10px rgba(16,185,129,0.22);
    transition: all 0.2s;
}
.vipp-pending-print-all:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(16,185,129,0.35); }
.vipp-pending-print-all .material-icons { font-size: 14px !important; }

.vipp-pending-list { display: flex; flex-direction: column; gap: 6px; }
.vipp-pending-item {
    background: white; border-radius: 8px; padding: 9px 12px;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid #fde68a;
    transition: all 0.15s;
}
.vipp-pending-item:hover { border-color: #f59e0b; transform: translateX(1px); }
.vipp-pending-item .vp-item-info { flex: 1; min-width: 0; }
.vipp-pending-item .vp-item-track {
    font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
    font-weight: 800; color: #065f46; letter-spacing: 0.4px;
}
.vipp-pending-item .vp-item-meta { font-size: 10.5px; color: #64748b; margin-top: 1px; }
.vipp-pending-item .vp-item-btn {
    background: linear-gradient(135deg, var(--primary), #ea580c); color: white;
    border: none; border-radius: 7px; padding: 6px 11px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.vipp-pending-item .vp-item-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(234,88,12,0.25); }
.vipp-pending-item .vp-item-btn .material-icons { font-size: 13px !important; }

/* ============================================
   POSTAGENS - lista geral
   ============================================ */
.postagens-card {
    background: white;
    border-radius: 14px;
    border: 1px solid #eef0ff;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.postagens-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.postagens-title-wrap { display: flex; align-items: center; gap: 12px; }
.postagens-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, #ea580c, #c2410c); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px !important;
    box-shadow: 0 4px 10px rgba(234,88,12,0.22);
}
.postagens-title { font-size: 15px; font-weight: 800; color: #1e293b; }
.postagens-sub { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.postagens-new-btn {
    background: linear-gradient(135deg, var(--primary), #ea580c); color: white;
    border: none; border-radius: 9px; padding: 8px 14px;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 4px 10px rgba(234,88,12,0.22);
    transition: all 0.2s;
}
.postagens-new-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(234,88,12,0.32); }
.postagens-new-btn .material-icons { font-size: 16px !important; }

.postagens-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.postagens-config-btn {
    background: #fff; color: #475569;
    border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 14px;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; transition: all 0.2s;
}
.postagens-config-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(234,88,12,0.04); }
.postagens-config-btn .material-icons { font-size: 16px !important; }

/* ===== Modal Configurações do ViPP ===== */
.vipp-config-modal { width: 600px !important; max-width: 96% !important; max-height: 90vh; overflow-y: auto; padding: 0 !important; }
.vipp-config-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid #f1f5f9;
    position: sticky; top: 0; background: #fff; z-index: 2;
}
.vipp-config-head-icon {
    width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(135deg, #ea580c, #c2410c); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.vipp-config-head-icon .material-icons { font-size: 22px !important; }
.vipp-config-title { font-size: 16px; font-weight: 800; color: #1e293b; }
.vipp-config-sub { font-size: 12px; color: #64748b; margin-top: 1px; }
.vipp-config-close {
    margin-left: auto; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; width: 34px; height: 34px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: #64748b;
}
.vipp-config-close:hover { background: #fff; color: #ef4444; }
.vipp-config-status {
    margin: 14px 20px 0; padding: 0; font-size: 12.5px; font-weight: 600;
    border-radius: 9px; display: none;
}
.vipp-config-status:not(:empty) { display: flex; align-items: center; gap: 7px; padding: 10px 12px; }
.vipp-config-status .material-icons { font-size: 17px !important; }
.vipp-config-status.testing { background: #eff6ff; color: #1d4ed8; }
.vipp-config-status.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.vipp-config-status.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.vipp-config-body { padding: 16px 20px 20px; }
.vipp-config-group { margin-bottom: 18px; }
.vipp-config-group-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    color: #475569; margin-bottom: 10px;
}
.vipp-config-group-title .material-icons { font-size: 16px !important; color: var(--primary); }
.vipp-config-body label { display: block; font-size: 11.5px; font-weight: 700; color: #64748b; margin-bottom: 3px; }
.vipp-config-body input {
    width: 100%; padding: 9px 11px; font-size: 13px;
    border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 10px;
    background: #fff; transition: border-color 0.15s;
}
.vipp-config-body input:focus { outline: none; border-color: var(--primary); }
.vipp-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.vipp-config-hint { font-size: 11px; color: #94a3b8; margin: -4px 0 10px; }
.vipp-config-hint code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; color: #475569; }
.vipp-config-test {
    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
    border-radius: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s;
}
.vipp-config-test:hover { background: #dbeafe; }
.vipp-config-test .material-icons { font-size: 16px !important; }
.vipp-config-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 14px; margin-top: 4px; border-top: 1px solid #f1f5f9;
}
@media (max-width: 640px) {
    .vipp-config-grid { grid-template-columns: 1fr; }
}

.postagens-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.postagens-search-wrap {
    display: flex; align-items: center; gap: 8px;
    background: #f8fafc; border: 1.5px solid #e5e7eb;
    border-radius: 9px; padding: 0 12px;
    transition: all 0.15s;
}
.postagens-search-wrap:focus-within {
    background: white; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(234,88,12,0.08);
}
.postagens-search-wrap > .material-icons { font-size: 16px !important; color: #94a3b8; }
.postagens-search-wrap input {
    border: none !important; outline: none !important; background: transparent !important;
    flex: 1; padding: 9px 0 !important; margin: 0 !important;
    font-size: 13px; font-weight: 600; color: #1e293b;
}
.postagens-chips {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f8f7ff, #f0efff);
    border: 1px solid rgba(139,92,246,0.08);
    border-radius: 10px;
    align-items: center;
}
.postagens-chips::before {
    content: 'filter_list'; font-family: 'Material Icons';
    font-size: 15px; color: #6366f1;
    margin-right: 2px;
}
.post-chip {
    background: white; border: 1px solid rgba(139,92,246,0.12);
    color: #64748b; font-size: 11px; font-weight: 600;
    padding: 5px 12px; border-radius: 99px; cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.post-chip:hover { border-color: #c4b5fd; color: var(--purple); background: #f5f3ff; transform: translateY(-1px); }
.post-chip.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(139,92,246,0.3);
    transform: translateY(-1px);
}

.postagens-list { display: flex; flex-direction: column; gap: 10px; }
.postagem-item {
    background: white; border-radius: 12px;
    border: 1px solid #e5e7eb; padding: 14px 16px;
    display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
    transition: all 0.2s;
    align-items: center;
}
.postagem-item:hover {
    border-color: #fed7aa;
    box-shadow: 0 6px 18px rgba(234,88,12,0.1);
    transform: translateY(-1px);
}
.postagem-item-main { min-width: 0; }
.postagem-item-track {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px; font-weight: 900; color: #065f46;
    letter-spacing: 0.6px; margin-bottom: 6px;
    display: inline-block;
    padding: 2px 0;
}
.postagem-item-info {
    display: flex; flex-wrap: wrap; gap: 6px;
    font-size: 11px; color: #64748b; align-items: center;
}
.postagem-item-info .pi-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #f1f5f9; padding: 3px 8px; border-radius: 6px;
    font-weight: 700; color: #475569;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.postagem-item-info .pi-tag:hover { border-color: #e2e8f0; }
.postagem-item-info .pi-tag.pi-selb {
    background: #eef2ff; color: #4338ca;
    font-family: 'JetBrains Mono', monospace;
}
.postagem-item-info .pi-tag.pi-status-printed { background: #dcfce7; color: #166534; }
.postagem-item-info .pi-tag.pi-status-pending { background: #fef3c7; color: #92400e; }
.postagem-item-info .pi-tag.pi-status-transit { background: #fff7ed; color: #c2410c; }
.postagem-item-info .pi-tag.pi-status-delivered { background: #dcfce7; color: #166534; }
.postagem-item-info .pi-tag.pi-origem-envios { background: #ffedd5; color: #9a3412; }
.postagem-item-info .pi-tag.pi-origem-postagens { background: #ede9fe; color: #5b21b6; }
.postagem-item-info .pi-tag .material-icons { font-size: 12px !important; }

.postagem-item-actions {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.postagem-action {
    background: white; border: 1px solid #e5e7eb;
    color: #475569; border-radius: 7px; padding: 7px 11px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: all 0.15s;
}
.postagem-action:hover { border-color: var(--primary); color: var(--primary); background: #fff7ed; }
.postagem-action.pa-primary {
    background: linear-gradient(135deg, var(--primary), #ea580c); color: white; border-color: transparent;
    box-shadow: 0 2px 6px rgba(234,88,12,0.22);
}
.postagem-action.pa-primary:hover { transform: translateY(-1px); color: white; background: linear-gradient(135deg, #ea580c, #c2410c); }
.postagem-action .material-icons { font-size: 13px !important; }

.postagens-empty {
    text-align: center; padding: 40px 16px; color: #94a3b8;
}
.postagens-empty .material-icons {
    font-size: 44px !important; opacity: 0.4; display: block; margin: 0 auto 10px;
}
.postagens-empty p { font-size: 13px; margin: 0; }

@media (max-width: 600px) {
    .postagem-item { grid-template-columns: auto 1fr; }
    .postagem-item-actions { justify-content: flex-start; }
}

/* Multi-select & paginação postagens — estilo limpo */
.postagem-item {
    grid-template-columns: auto auto 1fr auto !important;
    align-items: center;
    gap: 14px !important;
}
.postagem-checkbox {
    width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary);
    margin: 0;
}
.postagem-item-selected {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fff7ed 100%) !important;
}

/* Badge de SELB — design clean e moderno */
.postagem-selb-badge {
    position: relative;
    padding: 6px 12px 6px 16px;
    min-width: 72px;
    transition: all 0.2s;
    display: flex; flex-direction: column;
    border-left: 3px solid var(--primary);
}
.postagem-selb-badge::before {
    content: 'SELB';
    font-size: 8.5px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1.2px;
    line-height: 1;
    margin-bottom: 3px;
}
.postagem-selb-badge .pi-selb-label { display: none; }
.postagem-selb-badge .pi-selb-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px; font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.5px;
    line-height: 1.1;
}
.postagem-item:hover .postagem-selb-badge {
    border-left-color: #c2410c;
}
.postagem-item:hover .postagem-selb-badge .pi-selb-value {
    color: var(--primary);
}
.postagem-item-selected .postagem-selb-badge {
    border-left-color: #d97706;
}
.postagem-item-selected .postagem-selb-badge .pi-selb-value { color: #78350f; }

@media (max-width: 600px) {
    .postagem-item { grid-template-columns: auto auto 1fr !important; gap: 8px !important; }
    .postagem-selb-badge { min-width: 56px; padding: 4px 8px 4px 10px; }
    .postagem-selb-badge .pi-selb-value { font-size: 14px; }
    .postagem-selb-badge::before { font-size: 8px; }
    .postagem-item-actions { grid-column: 1 / -1; margin-top: 6px; }
}

.postagem-list-header {
    display: inline-flex; align-items: center;
    padding: 4px 0 12px;
    margin-bottom: 6px;
}
.postagem-select-all {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600; color: #64748b;
    cursor: pointer;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.15s;
}
.postagem-select-all:hover { background: #fff7ed; border-color: #fed7aa; color: var(--primary); }
.postagem-select-all input { accent-color: var(--primary); transform: scale(1.1); margin: 0; }
.psa-text { font-weight: 700; }
.psa-count {
    background: var(--primary); color: white;
    padding: 1px 7px; border-radius: 99px;
    font-size: 10px; font-weight: 800;
    min-width: 22px; text-align: center;
}

.postagens-bulk-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px; margin-bottom: 12px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white; border-radius: 12px;
    box-shadow: 0 6px 18px rgba(15,23,42,0.28);
    animation: rcpFadeIn 0.2s ease-out;
    flex-wrap: wrap;
}
.postagens-bulk-info {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: white;
}
.postagens-bulk-info .material-icons { font-size: 18px !important; color: #fb923c; }
.postagens-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.postagens-bulk-btn {
    background: white; border: none;
    border-radius: 8px; padding: 8px 13px;
    font-size: 12px; font-weight: 800; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.postagens-bulk-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.22); }
.postagens-bulk-btn .material-icons { font-size: 15px !important; }
.postagens-bulk-btn.pbb-etiquetas { background: linear-gradient(135deg, var(--primary), #ea580c); color: white; }
.postagens-bulk-btn.pbb-declaracoes { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; }
.postagens-bulk-btn.pbb-ambos { background: linear-gradient(135deg, #10b981, #059669); color: white; }

/* Botões individuais nos items */
.postagem-action.pa-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(139,92,246,0.22);
}
.postagem-action.pa-purple:hover { transform: translateY(-1px); color: white; background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.postagem-action.pa-combo {
    background: linear-gradient(135deg, #10b981, #059669); color: white;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(16,185,129,0.22);
}
.postagem-action.pa-combo:hover { transform: translateY(-1px); color: white; background: linear-gradient(135deg, #059669, #047857); }

/* Paginador das listas em cartão (Postagens, Comodato) — js/pager.js
   Todas as páginas numa faixa que desliza; a atual fica no centro. */
.pg {
    position: relative; display: flex; align-items: center; gap: 6px;
    margin: 4px 0 14px; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid #eef0f6;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -14px rgba(15,23,42,.2);
}
.pg-top { scroll-margin-top: 90px; }
.pg-bottom { margin: 14px 0 2px; }
.pg-nav {
    width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 11px; cursor: pointer;
    display: grid; place-items: center; color: #334155; background: #f8fafc; transition: background .15s, color .15s, transform .15s;
}
.pg-nav:hover:not(:disabled) { background: #fff7ed; color: var(--primary); }
.pg-nav:active:not(:disabled) { transform: scale(.92); }
.pg-nav:disabled { opacity: .35; cursor: default; }
.pg-nav .material-icons { font-size: 20px; }

.pg-track { position: relative; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 2px 0; }
.pg-track::-webkit-scrollbar { display: none; }
.pg-track.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.pg-track.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.pg-track.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.pg-nums { display: flex; gap: 3px; width: max-content; margin: 0 auto; }
.pg-num {
    min-width: 34px; height: 34px; padding: 0 9px; border: 0; border-radius: 10px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: #64748b; background: transparent; transition: background .15s, color .15s;
}
.pg-num:hover:not(.active) { background: #f1f5f9; color: #0f172a; }
.pg-num:focus-visible, .pg-nav:focus-visible { outline: 2px solid #fdba74; outline-offset: 1px; }
.pg-num.active {
    color: #fff; font-weight: 800; background: linear-gradient(135deg, #f97316, var(--primary));
    box-shadow: 0 6px 14px -4px rgba(234,88,12,.55); animation: pgPop .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pgPop { from { transform: scale(.82); } to { transform: none; } }

.pg-info { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; padding: 0 10px 0 8px; font-size: 12px; color: #64748b; white-space: nowrap; }
.pg-info b { color: #0f172a; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-bar { display: block; width: 76px; height: 4px; border-radius: 99px; background: #f1f5f9; overflow: hidden; }
.pg-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fdba74, var(--primary)); transition: width .35s ease; }

.pg-tip {
    position: absolute; bottom: calc(100% + 2px); left: 0; z-index: 30; padding: 6px 10px; border-radius: 9px; pointer-events: none;
    font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #fff; background: #0f172a; box-shadow: 0 8px 20px rgba(15,23,42,.25);
    opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s;
}
.pg-tip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #0f172a; }
.pg-tip.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 600px) {
    .pg { flex-wrap: wrap; gap: 4px; padding: 5px; }
    .pg-nav { width: 34px; height: 34px; }
    .pg-num { min-width: 32px; height: 32px; padding: 0 7px; font-size: 12.5px; }
    .pg-info { order: 3; width: 100%; flex-direction: row; align-items: center; gap: 12px; padding: 4px 8px 3px; }
    .pg-bar { flex: 1; width: auto; }
    .pg-tip { display: none; }
}

/* MODAL Nova Postagem */
.nova-postagem-modal {
    max-width: 800px !important;
    width: 92% !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px !important;
    box-shadow: 0 25px 70px rgba(15,23,42,0.35) !important;
}
.np-modal-header {
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--primary), #ea580c, #c2410c);
    color: white;
    display: flex; align-items: center; justify-content: space-between;
    position: relative; overflow: hidden;
}
.np-modal-header::before {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.np-modal-title { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.np-modal-title > .material-icons {
    width: 38px; height: 38px; border-radius: 11px;
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px !important;
    backdrop-filter: blur(8px);
}
.np-modal-h { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }
.np-modal-sub { font-size: 11.5px; opacity: 0.9; margin-top: 2px; }
.np-modal-close {
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25);
    color: white; width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; position: relative; z-index: 1;
}
.np-modal-close:hover { background: rgba(255,255,255,0.28); transform: rotate(90deg); }
.np-modal-close .material-icons { font-size: 18px !important; }

.np-modal-body {
    padding: 18px 22px;
    max-height: 75vh; overflow-y: auto;
    background: linear-gradient(180deg, #faf9ff, #ffffff);
}

@media (max-width: 768px) {
    .nova-postagem-modal { width: 96% !important; max-width: 96% !important; }
    .np-modal-body { padding: 12px 14px; }
}

.vipp-session-info {
    position: relative; z-index: 1;
    margin-top: 8px; margin-left: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(16,185,129,0.2);
    border: 1px solid rgba(16,185,129,0.35);
    padding: 4px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 700;
    color: #ecfdf5; backdrop-filter: blur(6px);
    font-family: 'JetBrains Mono', monospace;
}
.vipp-session-info .material-icons { font-size: 13px !important; }
.vipp-session-info code {
    background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 3px;
    font-size: 10px; color: #fef3c7;
}
.vipp-session-info.vipp-session-err {
    background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.4); color: #fee2e2;
}

.vipp-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}
@media (max-width: 1024px) {
    .vipp-grid { grid-template-columns: 1fr; }
}

.vipp-card {
    background: white;
    border-radius: 14px;
    border: 1px solid #eef0ff;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.vipp-card-header {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.vipp-card-header > .material-icons {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #6366f1;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px !important; flex-shrink: 0;
    border: 1px solid #c7d2fe;
}
.vipp-card-title { font-size: 14px; font-weight: 800; color: #1e293b; letter-spacing: -0.2px; }
.vipp-card-sub { font-size: 11px; color: #64748b; margin-top: 2px; }

.vipp-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.vipp-field { display: flex; flex-direction: column; gap: 4px; }
.vipp-field-full { grid-column: span 4; }
.vipp-field-narrow { grid-column: span 1; }
.vipp-field:not(.vipp-field-full):not(.vipp-field-narrow) { grid-column: span 2; }
@media (max-width: 700px) {
    .vipp-fields { grid-template-columns: 1fr 1fr; }
    .vipp-field, .vipp-field-full, .vipp-field-narrow { grid-column: span 2; }
}
.vipp-field label {
    font-size: 10px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.vipp-req { color: #dc2626; margin-left: 2px; }
.vipp-opt {
    color: #94a3b8; font-weight: 500; margin-left: 4px;
    text-transform: none; letter-spacing: 0;
    font-size: 10px;
}

.vipp-input-wrap {
    display: flex; align-items: center; gap: 7px;
    background: white; border: 1.5px solid #e5e7eb;
    border-radius: 9px; padding: 0 10px;
    transition: all 0.15s; position: relative;
}
.vipp-input-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(234,88,12,0.08);
}
.vipp-input-wrap.vipp-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239,68,68,0.12);
    animation: vippShake 0.4s ease-out;
}
@keyframes vippShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
.vipp-input-wrap > .material-icons {
    font-size: 15px !important; color: #94a3b8; flex-shrink: 0;
}
.vipp-input-wrap:focus-within > .material-icons { color: var(--primary); }
.vipp-input-wrap input {
    border: none !important; outline: none !important; background: transparent !important;
    flex: 1; padding: 9px 0 !important; margin: 0 !important;
    font-size: 13px; font-weight: 600; color: #1e293b;
    min-width: 0;
}

.vipp-spinner-small {
    width: 14px; height: 14px;
    border: 2px solid #e5e7eb; border-top-color: #6366f1;
    border-radius: 50%;
    animation: vippSpin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes vippSpin { to { transform: rotate(360deg); } }
.vipp-spinner-inline {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: white;
    border-radius: 50%; animation: vippSpin 0.7s linear infinite;
    margin-right: 6px; vertical-align: middle;
}

.vipp-defaults-box {
    margin-top: 12px;
    background: #fafbff;
    border: 1px solid #eef0ff;
    border-radius: 10px;
    padding: 10px 12px;
}
.vipp-defaults-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.vipp-defaults-title .material-icons { font-size: 13px !important; }
.vipp-defaults-grid {
    display: grid; gap: 3px;
    font-size: 11px; color: #475569; line-height: 1.5;
}
.vipp-defaults-grid b { color: #334155; font-weight: 700; }

.vipp-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
    flex-wrap: wrap;
}
.vipp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px; border-radius: 9px; border: none;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.vipp-btn .material-icons { font-size: 15px !important; }
.vipp-btn-primary {
    background: linear-gradient(135deg, var(--primary), #ea580c); color: white;
    box-shadow: 0 3px 10px rgba(234,88,12,0.28);
}
.vipp-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px); box-shadow: 0 5px 14px rgba(234,88,12,0.38);
}
.vipp-btn-primary:disabled { opacity: 0.65; cursor: not-allowed; }
.vipp-btn-secondary {
    background: white; color: #64748b;
    border: 1.5px solid #e5e7eb;
}
.vipp-btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
.vipp-btn-success {
    background: linear-gradient(135deg, #10b981, #059669); color: white;
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.vipp-btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,185,129,0.4); }

/* Resultado */
.vipp-result-empty {
    text-align: center; padding: 36px 20px; color: #94a3b8;
}
.vipp-result-empty .material-icons {
    font-size: 48px !important; opacity: 0.4; display: block; margin: 0 auto 10px;
}
.vipp-result-empty p { font-size: 13px; margin: 0; line-height: 1.5; }

.vipp-result-success {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7;
    border-radius: 12px;
    padding: 16px;
    animation: vippFadeIn 0.4s ease-out;
}
@keyframes vippFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.vipp-track-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #10b981, #059669); color: white;
    padding: 5px 12px; border-radius: 99px;
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(16,185,129,0.3);
}
.vipp-track-badge .material-icons { font-size: 13px !important; }
.vipp-track-code {
    font-size: 26px; font-weight: 900; letter-spacing: 1.5px;
    color: #065f46; margin: 10px 0;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    word-break: break-all;
    padding: 14px 10px;
    background: rgba(255,255,255,0.65);
    border-radius: 10px;
    border: 1px dashed #6ee7b7;
}
.vipp-track-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-top: 12px;
}
.vipp-track-meta-item {
    background: white; border-radius: 8px; padding: 8px 10px;
    border: 1px solid #d1fae5;
}
.vipp-track-meta-label {
    font-size: 9.5px; font-weight: 700; color: #047857;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.vipp-track-meta-value {
    font-size: 12.5px; font-weight: 700; color: #065f46;
    font-family: 'JetBrains Mono', monospace; margin-top: 2px;
    word-break: break-all;
}

.vipp-result-error {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 1px solid #fca5a5;
    border-radius: 14px;
    padding: 18px;
    display: flex; align-items: flex-start; gap: 12px;
}
.vipp-error-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #ef4444, #dc2626); color: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vipp-error-icon .material-icons { font-size: 20px !important; }
.vipp-error-text { font-size: 13px; color: #991b1b; line-height: 1.5; font-weight: 600; }

.vipp-debug {
    margin-top: 16px;
    background: #0f172a;
    border-radius: 10px;
    overflow: hidden;
}
.vipp-debug summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    user-select: none;
    transition: all 0.15s;
}
.vipp-debug summary::-webkit-details-marker { display: none; }
.vipp-debug summary:hover { color: #cbd5e1; background: rgba(255,255,255,0.03); }
.vipp-debug summary .material-icons { font-size: 14px !important; }
.vipp-debug[open] summary { border-bottom: 1px solid rgba(255,255,255,0.06); color: #cbd5e1; }
.vipp-debug pre {
    margin: 0; padding: 12px 14px;
    background: #0f172a; color: #a5f3fc;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    max-height: 260px; overflow: auto;
    white-space: pre-wrap; word-break: break-all;
}

/* ============================================
   MODELOS DE IMPRESSORA — CRUD modal
   ============================================ */
.btn-models {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.06)) !important;
    border: 1px solid rgba(99,102,241,0.2) !important;
    color: #4f46e5 !important; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
}
.btn-models:hover { background: rgba(99,102,241,0.14) !important; border-color: #6366f1 !important; transform: translateY(-1px); }

.pm-modal {
    max-width: 620px !important; width: 100% !important;
    padding: 0 !important; overflow: hidden;
    border-radius: 18px !important;
    box-shadow: 0 30px 80px rgba(15,23,42,0.35) !important;
}
.pm-modal-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    color: white; display: flex; justify-content: space-between; align-items: center;
    position: relative; overflow: hidden;
}
.pm-modal-header::before {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.pm-modal-title { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.pm-modal-icon {
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
    padding: 10px; border-radius: 12px; font-size: 24px !important;
    backdrop-filter: blur(10px);
}
.pm-modal-h { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.pm-modal-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.pm-modal-close {
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
    color: white; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; position: relative; z-index: 1;
}
.pm-modal-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }
.pm-modal-close .material-icons { font-size: 20px !important; }

.pm-modal-body { padding: 20px 24px; max-height: 60vh; overflow-y: auto; background: linear-gradient(180deg, #faf9ff, #ffffff); }
.pm-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pm-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    background: white; border: 1px solid #e5e7eb;
    transition: all 0.2s;
    animation: pmRowIn 0.25s ease-out;
}
@keyframes pmRowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.pm-row:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(99,102,241,0.08); }
.pm-row-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 1px solid #c7d2fe;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pm-row-icon .material-icons { color: #6366f1; font-size: 20px !important; }
.pm-row-fields { flex: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 10px; min-width: 0; }
.pm-field-narrow { max-width: 130px; }
.pm-field label {
    display: block; font-size: 9.5px; font-weight: 700; color: #6366f1;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.pm-input {
    width: 100%; padding: 8px 10px; border: 1px solid #e5e7eb;
    border-radius: 8px; font-size: 13px; font-weight: 600; color: #1e293b;
    transition: all 0.15s; outline: none;
}
.pm-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.pm-input-num { font-family: 'JetBrains Mono', monospace; text-align: center; }
.pm-row-del {
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
    color: #dc2626; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.pm-row-del:hover { background: rgba(239,68,68,0.15); border-color: #ef4444; transform: scale(1.05); }
.pm-row-del .material-icons { font-size: 18px !important; }

.pm-add-btn {
    width: 100%; padding: 12px 14px;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border: 2px dashed #c7d2fe; border-radius: 12px;
    color: #4f46e5; font-weight: 700; font-size: 13px;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pm-add-btn:hover {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border-color: #6366f1; transform: translateY(-1px);
}
.pm-add-btn .material-icons { font-size: 20px !important; }

.pm-info-box {
    margin-top: 14px; padding: 10px 12px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left: 3px solid #3b82f6; border-radius: 8px;
    font-size: 11.5px; color: #1e3a8a; line-height: 1.5;
    display: flex; align-items: flex-start; gap: 8px;
}
.pm-info-box .material-icons { font-size: 16px !important; color: #2563eb; flex-shrink: 0; margin-top: 1px; }
.pm-info-box b { color: #1e40af; }

.pm-modal-footer {
    padding: 14px 24px; display: flex; justify-content: flex-end; gap: 8px;
    border-top: 1px solid #eef0ff; background: white;
}
.pm-save-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important; border: none !important;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    font-weight: 700;
}
.pm-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.4); }
.pm-save-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

@media (max-width: 600px) {
    .pm-row-fields { grid-template-columns: 1fr; }
    .pm-field-narrow { max-width: 100%; }
}

/* ============================================
   RECEBIDOS — linha clicável
   ============================================ */
.recv-row-clickable { cursor: pointer; transition: background 0.15s; }
.recv-row-clickable:hover {
    background: linear-gradient(90deg, rgba(99,102,241,0.05), rgba(139,92,246,0.04)) !important;
}
.recv-row-clickable:hover .recv-row-arrow {
    color: var(--purple) !important; transform: translateX(2px);
}
.recv-row-arrow { transition: all 0.15s; }

/* ============================================
   MODAL DE DETALHES DO SELB (linha do tempo)
   ============================================ */
.sd-popup { border-radius: 18px !important; padding: 0 !important; overflow: hidden; }
.sd-modal { text-align: left; }
.sd-header {
    padding: 22px 24px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed, #a855f7);
    color: white; display: flex; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
}
.sd-header::before {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    pointer-events: none;
}
.sd-header-icon {
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
    padding: 10px; border-radius: 12px; font-size: 22px !important;
    backdrop-filter: blur(10px); position: relative; z-index: 1;
}
.sd-header-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; position: relative; z-index: 1; }
.sd-header-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; position: relative; z-index: 1; }

.sd-summary { padding: 16px 24px; background: linear-gradient(180deg, #faf9ff, #ffffff); border-bottom: 1px solid #eef0ff; }
.sd-summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sd-summary-item {
    background: white; border-radius: 10px; padding: 10px 12px;
    border: 1px solid #eef0ff;
}
.sd-summary-label { font-size: 9.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; }
.sd-summary-value { font-size: 14px; font-weight: 800; color: #1e293b; margin-top: 3px; word-break: break-all; }
.sd-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px !important; letter-spacing: 0.3px; }

.sd-timeline { padding: 22px 24px; max-height: 400px; overflow-y: auto; }
.sd-event {
    display: grid; grid-template-columns: 44px 1fr; gap: 14px;
    padding-bottom: 18px; position: relative;
    animation: sdFadeIn 0.3s ease-out;
}
@keyframes sdFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.sd-event.is-last { padding-bottom: 0; }
.sd-icon-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.sd-icon {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 2; position: relative;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 2px solid #cbd5e1;
}
.sd-icon .material-icons { font-size: 17px !important; color: #64748b; }
.sd-line {
    position: absolute; top: 38px; bottom: -22px;
    left: 50%; transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(180deg, #cbd5e1, transparent);
    z-index: 1;
}
.sd-event.sd-arrived .sd-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); border-color: #3b82f6; }
.sd-event.sd-arrived .sd-icon .material-icons { color: #2563eb; }
.sd-event.sd-shelved .sd-icon { background: linear-gradient(135deg, #ede9fe, #ddd6fe); border-color: #8b5cf6; }
.sd-event.sd-shelved .sd-icon .material-icons { color: #7c3aed; }
.sd-event.sd-current .sd-icon { background: linear-gradient(135deg, #cffafe, #a5f3fc); border-color: #06b6d4; box-shadow: 0 0 0 4px rgba(6,182,212,0.15); }
.sd-event.sd-current .sd-icon .material-icons { color: #0891b2; }
.sd-event.sd-shipped .sd-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; }
.sd-event.sd-shipped .sd-icon .material-icons { color: #d97706; }
.sd-event.sd-delivered .sd-icon { background: linear-gradient(135deg, #dcfce7, #bbf7d0); border-color: #10b981; }
.sd-event.sd-delivered .sd-icon .material-icons { color: #059669; }
.sd-event.sd-cancelled .sd-icon { background: linear-gradient(135deg, #fee2e2, #fecaca); border-color: #ef4444; }
.sd-event.sd-cancelled .sd-icon .material-icons { color: #dc2626; }
.sd-event.sd-returned .sd-icon { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); border-color: #6366f1; }
.sd-event.sd-returned .sd-icon .material-icons { color: #4338ca; }

.sd-content { padding-top: 4px; }
.sd-title { font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.35; }
.sd-sub { font-size: 11.5px; color: #64748b; margin-top: 3px; line-height: 1.4; }
.sd-date { margin-top: 4px; font-size: 10.5px; color: #94a3b8; font-weight: 600; font-family: 'JetBrains Mono', monospace; display: inline-flex; align-items: center; gap: 4px; }
.sd-date .material-icons { font-size: 12px !important; color: #cbd5e1; }

@media (max-width: 600px) {
    .sd-summary-row { grid-template-columns: 1fr; }
    .sd-event { grid-template-columns: 36px 1fr; gap: 10px; }
    .sd-icon { width: 32px; height: 32px; }
}

/* ============================================
   PRATELEIRAS — banner de busca
   ============================================ */
.stock-search-banner {
    display: none; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 14px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    animation: ssbSlideIn 0.25s ease-out;
}
@keyframes ssbSlideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.stock-search-banner > .material-icons {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 20px !important; color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.stock-search-banner.stock-search-found {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #86efac;
}
.stock-search-banner.stock-search-found > .material-icons {
    background: linear-gradient(135deg, #10b981, #059669);
}
.stock-search-banner.stock-search-empty {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fcd34d;
}
.stock-search-banner.stock-search-empty > .material-icons {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.ssb-content { flex: 1; min-width: 0; }
.ssb-title { font-size: 14px; font-weight: 800; color: #1e293b; }
.stock-search-banner.stock-search-found .ssb-title { color: #14532d; }
.stock-search-banner.stock-search-empty .ssb-title { color: #78350f; }
.ssb-sub { font-size: 12px; color: #475569; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ssb-pill {
    display: inline-flex; align-items: center; gap: 2px;
    background: white; color: #4338ca; border: 1px solid #c7d2fe;
    padding: 2px 8px; border-radius: 99px;
    font-size: 11px; font-weight: 700; margin: 2px 4px 2px 0;
}
.ssb-pill-unit { color: #6366f1; font-weight: 800; }
.ssb-pill-sep { font-size: 13px !important; color: #a5b4fc; }

/* ============================================
   UNIDADES — abas seletoras no estoque
   ============================================ */
.unit-tabs-bar {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0 16px; flex-wrap: wrap;
}
.unit-tabs { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.unit-tab {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--card-bg); border: 1.5px solid var(--border);
    border-radius: 99px; padding: 7px 8px 7px 14px;
    cursor: pointer; transition: all 0.18s;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    box-shadow: var(--shadow-sm);
}
.unit-tab:hover { border-color: #fdba74; color: var(--primary); transform: translateY(-1px); }
.unit-tab .unit-tab-icon { font-size: 18px !important; opacity: 0.7; }
.unit-tab-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-tab-count {
    background: #f1f5f9; color: #64748b;
    font-size: 11px; font-weight: 800; min-width: 22px; text-align: center;
    padding: 1px 7px; border-radius: 99px;
}
.unit-tab-edit {
    font-size: 16px !important; opacity: 0; color: inherit;
    border-radius: 50%; padding: 2px; transition: all 0.15s; margin-left: -2px;
}
.unit-tab:hover .unit-tab-edit { opacity: 0.5; }
.unit-tab-edit:hover { opacity: 1 !important; background: rgba(0,0,0,0.06); }
.unit-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    border-color: var(--primary); color: #fff;
    box-shadow: 0 4px 14px rgba(234,88,12,0.3);
}
.unit-tab.active .unit-tab-icon { opacity: 1; }
.unit-tab.active .unit-tab-count { background: rgba(255,255,255,0.25); color: #fff; }
.unit-tab.active .unit-tab-edit { color: #fff; }
.unit-tab-add {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1.5px dashed var(--border);
    border-radius: 99px; padding: 7px 14px;
    cursor: pointer; transition: all 0.18s;
    font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.unit-tab-add:hover { border-color: var(--primary); color: var(--primary); background: rgba(234,88,12,0.04); }
.unit-tab-add .material-icons { font-size: 18px !important; }

/* Badge da unidade no cabeçalho da prateleira */
.rack-unit-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700;
    background: rgba(255,255,255,0.18); color: #fde68a;
    padding: 2px 8px; border-radius: 4px; letter-spacing: 0.2px;
}
.rack-unit-badge .material-icons { font-size: 12px !important; }

/* Card flutuante com infos da unidade (hover/clique) */
.unit-info-popover {
    position: fixed; z-index: 9999;
    width: 290px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px; box-shadow: 0 18px 48px rgba(15,23,42,0.22);
    padding: 0; overflow: hidden;
    opacity: 0; transform: translateY(-6px) scale(0.98);
    pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease;
}
.unit-info-popover.show { opacity: 1; transform: translateY(0) scale(1); }
.unit-info-popover .uip-header {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff; padding: 12px 14px;
}
.unit-info-popover .uip-header .material-icons { font-size: 20px; }
.unit-info-popover .uip-name { font-size: 14px; font-weight: 800; line-height: 1.2; }
.unit-info-popover .uip-stats {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; font-size: 12px; color: var(--text-muted);
    background: #faf7f5; border-bottom: 1px solid #f1ece9;
}
.unit-info-popover .uip-stats b { color: var(--primary); font-weight: 800; }
.unit-info-popover .uip-dot { color: #d6d3d1; }
.unit-info-popover .uip-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.unit-info-popover .uip-row { display: flex; align-items: flex-start; gap: 10px; }
.unit-info-popover .uip-row .material-icons {
    font-size: 18px; color: var(--primary);
    background: rgba(234,88,12,0.1); border-radius: 8px; padding: 5px; flex-shrink: 0;
}
.unit-info-popover .uip-row-text { min-width: 0; }
.unit-info-popover .uip-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 1px;
}
.unit-info-popover .uip-value { font-size: 13px; font-weight: 600; color: var(--text-main); line-height: 1.35; word-break: break-word; }
.unit-info-popover .uip-empty {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-muted); line-height: 1.4;
}
.unit-info-popover .uip-empty .material-icons { font-size: 18px; color: #cbd5e1; }
.unit-info-popover .uip-principal {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: auto; font-size: 10px; font-weight: 800;
    background: rgba(255,255,255,0.22); color: #fff;
    padding: 2px 8px; border-radius: 99px; letter-spacing: 0.3px; text-transform: uppercase;
}
.unit-info-popover .uip-principal .material-icons { font-size: 13px !important; color: #fde047; }

/* Estrela de unidade principal na aba */
.unit-tab-star { font-size: 15px !important; color: #f59e0b; }
.unit-tab.active .unit-tab-star { color: #fde047; }

/* Toggle "unidade principal" no modal de editar unidade */
.unit-principal-toggle {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 10px 12px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
    cursor: pointer; font-size: 13px; font-weight: 600; color: #92400e;
}
.unit-principal-toggle input { width: 16px; height: 16px; accent-color: #f59e0b; cursor: pointer; margin: 0; }
.unit-principal-toggle .material-icons { font-size: 18px; color: #f59e0b; }
.unit-principal-toggle small { font-weight: 400; color: #b45309; }

/* Indicador de observação na caixa da impressora */
.rack-obs-badge {
    position: absolute; top: 3px; right: 3px; z-index: 6;
    width: 18px; height: 18px; border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(180,83,9,0.45);
    display: flex; align-items: center; justify-content: center;
    cursor: help; animation: obsPulse 2.2s ease-in-out infinite;
}
.rack-obs-badge .material-icons { font-size: 11px !important; color: #fff; }
@keyframes obsPulse {
    0%, 100% { box-shadow: 0 1px 4px rgba(180,83,9,0.45); }
    50% { box-shadow: 0 1px 4px rgba(180,83,9,0.45), 0 0 0 4px rgba(245,158,11,0.18); }
}

/* Tooltip flutuante da observação */
.obs-tooltip {
    position: fixed; z-index: 10000;
    max-width: 260px; pointer-events: none;
    display: flex; align-items: flex-start; gap: 8px;
    background: #1e293b; color: #f8fafc;
    padding: 9px 12px; border-radius: 10px;
    font-size: 12.5px; font-weight: 500; line-height: 1.4;
    box-shadow: 0 12px 30px rgba(15,23,42,0.35);
    opacity: 0; transform: translateY(-4px); transition: opacity 0.14s, transform 0.14s;
}
.obs-tooltip.show { opacity: 1; transform: translateY(0); }
.obs-tooltip .material-icons { font-size: 16px !important; color: #fbbf24; flex-shrink: 0; margin-top: 1px; }
.obs-tooltip .obs-tip-text { word-break: break-word; }
.ssb-clear {
    background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.ssb-clear:hover { background: white; transform: scale(1.05); }
.ssb-clear .material-icons { font-size: 16px !important; color: #64748b; }

/* ============================================
   DRAWER — botão editar destinatário
   ============================================ */
.drawer-edit-btn {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.06));
    border: 1px solid rgba(99,102,241,0.2); color: #4f46e5;
    border-radius: 8px; padding: 6px 8px; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center;
}
.drawer-edit-btn:hover { background: rgba(99,102,241,0.12); transform: scale(1.05); }
.drawer-edit-btn .material-icons { font-size: 18px !important; }
.drawer-edit-btn.editing {
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.06));
    border-color: rgba(239,68,68,0.2); color: #dc2626;
}

.btn-update-recipient {
    width: 100%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important; border: none !important;
    border-radius: 10px !important; font-weight: 700 !important;
    padding: 12px 16px !important; box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; transition: all 0.2s;
}
.btn-update-recipient:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.4); }

/* Coluna Data: timeline vertical com bolinhas conectadas */
.date-cell {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 140px; max-width: 180px;
    position: relative;
}
.date-row {
    display: flex; align-items: center; gap: 10px;
    position: relative;
}
/* Linha conectora entre as duas bolinhas */
.date-row.date-row-sent::after {
    content: ''; position: absolute;
    left: 9px; top: 22px; width: 2px; height: 14px;
    background: linear-gradient(180deg, #cbd5e1, transparent);
    z-index: 0;
}
.date-cell .date-row:last-child.date-row-sent::after { display: none; }

.date-dot {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative; z-index: 1;
    box-shadow: 0 0 0 3px white, 0 1px 3px rgba(0,0,0,0.08);
}
.date-dot .material-icons { font-size: 11px !important; color: white; font-weight: 700; }

.date-dot-sent {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    border: 2px solid white;
}
.date-dot-sent::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #64748b;
}
.date-dot-delivered { background: linear-gradient(135deg, #10b981, #059669); }
.date-dot-predicted { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.date-dot-pending {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    animation: datePendingPulse 2s ease-in-out infinite;
}
.date-dot-cancelled { background: linear-gradient(135deg, #ef4444, #dc2626); }

@keyframes datePendingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.date-content { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.date-label {
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: #94a3b8; margin-bottom: 1px;
}
.date-value {
    font-size: 12.5px; font-weight: 700;
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.2px;
    color: #1e293b;
}
.date-value-muted { color: #94a3b8; font-style: italic; font-weight: 500; font-family: 'Inter', sans-serif; }

/* Variações por estado */
.date-row-sent .date-label { color: #64748b; }
.date-row-sent .date-value { color: #1e293b; }

.date-row-delivered .date-label { color: #15803d; }
.date-row-delivered .date-value { color: #166534; }

.date-row-predicted .date-label { color: #6366f1; }
.date-row-predicted .date-value { color: #4338ca; }

.date-row-cancelled .date-label { color: #dc2626; }
.date-row-cancelled .date-value { color: #991b1b; }

/* Card de retorno dentro do drawer do destinatário */
.drawer-return-card {
    background: linear-gradient(135deg, #fff5f5, #fef2f2);
    border: 1px solid #fecaca; border-left: 4px solid #ef4444;
    border-radius: 10px; padding: 14px; margin-bottom: 16px;
}
.drawer-return-header { display: flex; align-items: center; gap: 12px; }
.drawer-return-header > .material-icons {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #ef4444, #dc2626); color: white;
    display: flex; align-items: center; justify-content: center; font-size: 20px !important;
    flex-shrink: 0; box-shadow: 0 4px 10px rgba(239,68,68,0.25);
}
.drawer-return-title { font-size: 13px; font-weight: 800; color: #991b1b; }
.drawer-return-sub { font-size: 11px; color: #b91c1c; margin-top: 2px; font-weight: 500; }

.drawer-return-code-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #fca5a5; }
.drawer-return-label {
    font-size: 10px; font-weight: 700; color: #b91c1c;
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
}
.drawer-return-code-row { display: flex; gap: 8px; align-items: stretch; }
.drawer-return-code-row code {
    flex: 1; background: white; border: 1px solid #fca5a5; border-radius: 8px;
    padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: 13px; color: #1e293b; letter-spacing: 0.5px;
    display: flex; align-items: center;
}
.drawer-return-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626); color: white;
    border: none; border-radius: 8px; padding: 0 14px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: all 0.2s; box-shadow: 0 2px 8px rgba(239,68,68,0.25);
    white-space: nowrap;
}
.drawer-return-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,68,68,0.35); }
.drawer-return-btn .material-icons { font-size: 15px !important; }

/* ============================================
   MODAL DE RASTREIO MODERNO
   ============================================ */
.track-modal-modern {
    max-width: 640px !important; padding: 0 !important; overflow: hidden;
    border-radius: 18px !important;
    box-shadow: 0 30px 80px rgba(15,23,42,0.35) !important;
}
.track-modal-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    color: white; display: flex; justify-content: space-between; align-items: center;
    position: relative; overflow: hidden;
}
.track-modal-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.18), transparent 50%);
    pointer-events: none;
}
.track-modal-title { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.track-modal-icon {
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25);
    padding: 10px; border-radius: 12px; font-size: 24px !important;
    backdrop-filter: blur(10px);
}
.track-modal-h { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.track-modal-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; font-weight: 500; }
.track-selb-badge {
    background: rgba(255,255,255,0.18); color: white; font-weight: 700;
    padding: 6px 12px; border-radius: 8px; font-size: 13px;
    border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(10px);
    position: relative; z-index: 1; font-family: 'JetBrains Mono', monospace;
}

.track-tabs {
    display: flex; gap: 0; padding: 0 24px;
    background: linear-gradient(180deg, #faf9ff, #ffffff);
    border-bottom: 1px solid #eef0ff;
}
.track-tab {
    background: none; border: none; padding: 14px 18px;
    font-size: 13px; font-weight: 600; color: #94a3b8; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    border-bottom: 3px solid transparent; transition: all 0.2s;
    margin-bottom: -1px;
}
.track-tab .material-icons { font-size: 16px; }
.track-tab:hover { color: var(--purple); }
.track-tab.active {
    color: #4f46e5; border-bottom-color: #6366f1;
    background: linear-gradient(180deg, transparent, rgba(99,102,241,0.04));
}

.track-tab-pane { padding: 20px 24px; }

.track-input-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 14px; }
.track-input-wrap {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: white; border: 2px solid #e5e7eb; border-radius: 10px;
    padding: 0 12px; transition: all 0.2s;
}
.track-input-wrap:focus-within {
    border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.08);
}
.track-input-icon { color: #94a3b8; font-size: 18px !important; }
.track-input-wrap input {
    border: none !important; outline: none; padding: 11px 0 !important;
    flex: 1; font-size: 13px; font-weight: 600; background: transparent !important;
    margin: 0 !important; font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
}
.track-search-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white;
    border: none; border-radius: 10px; padding: 0 16px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: all 0.2s; box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}
.track-search-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.35); }
.track-search-btn .material-icons { font-size: 16px; }

.track-timeline-box {
    background: linear-gradient(180deg, #fafbff, #f5f3ff);
    border: 1px solid #eef0ff; border-radius: 12px;
    max-height: 280px; overflow-y: auto; padding: 16px;
}
.track-empty-state {
    text-align: center; padding: 30px 10px; color: #94a3b8;
}
.track-empty-state .material-icons { font-size: 36px; opacity: 0.5; display: block; margin: 0 auto 8px; }
.track-empty-state p { font-size: 13px; margin: 0; }

.track-cancel-section {
    margin-top: 16px; border: 1px dashed #e5e7eb;
    border-radius: 10px; background: #fafbff; transition: all 0.2s;
}
.track-cancel-section[open] { border-color: #fca5a5; background: rgba(254,226,226,0.3); }
.track-cancel-section summary {
    padding: 10px 14px; cursor: pointer; font-size: 12px; font-weight: 600;
    color: #64748b; display: flex; align-items: center; gap: 6px;
    user-select: none; list-style: none;
}
.track-cancel-section summary::-webkit-details-marker { display: none; }
.track-cancel-section summary .material-icons { font-size: 16px; transition: transform 0.2s; }
.track-cancel-section[open] summary .material-icons { transform: rotate(180deg); color: #dc2626; }
.track-cancel-section[open] summary { color: #991b1b; }
.track-cancel-content { padding: 0 14px 14px; }
.track-cancel-desc {
    font-size: 11.5px; color: #64748b; line-height: 1.5; margin: 4px 0 12px;
}
.btn-track-danger {
    width: 100%; background: linear-gradient(135deg, #ef4444, #dc2626); color: white;
    border: none; padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.2s; box-shadow: 0 4px 12px rgba(239,68,68,0.25);
}
.btn-track-danger:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(239,68,68,0.4); }
.btn-track-danger .material-icons { font-size: 16px; }
.btn-track-secondary {
    width: 100%; background: white; color: #4f46e5;
    border: 1px solid #c7d2fe; padding: 10px 14px; border-radius: 10px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.2s; margin-top: 8px;
}
.btn-track-secondary:hover { background: #eef2ff; border-color: #6366f1; }
.btn-track-secondary .material-icons { font-size: 16px; }

.track-return-summary {
    background: white; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
    border: 1px solid #eef0ff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.track-return-summary .ret-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.track-return-summary .ret-row .ret-label { color: #64748b; font-weight: 600; }
.track-return-summary .ret-row .ret-value { color: #1e293b; font-weight: 700; text-align: right; }
.track-return-summary .ret-status-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; }

.track-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 16px 24px; border-top: 1px solid #eef0ff;
    background: linear-gradient(180deg, #fafbff, #f5f3ff);
}

/* SweetAlert moderno para cancelamento */
.swal-cancel-modern { border-radius: 18px !important; padding: 0 !important; overflow: hidden !important; }
.swal-cancel-modern .swal2-title {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white !important; padding: 22px 24px !important; margin: 0 !important;
    font-size: 18px !important; font-weight: 800 !important; text-align: left !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
}
.swal-cancel-modern .swal2-html-container { padding: 20px 24px !important; margin: 0 !important; text-align: left !important; }
.swal-cancel-modern .swal2-actions { padding: 0 24px 20px !important; margin: 0 !important; }
.swal-cancel-modern .swal2-confirm, .swal-cancel-modern .swal2-cancel { border-radius: 10px !important; font-weight: 700 !important; padding: 10px 18px !important; }

.cancel-flow-warning {
    display: flex; align-items: flex-start; gap: 10px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-left: 4px solid #f59e0b; padding: 12px 14px;
    border-radius: 8px; margin-bottom: 16px; font-size: 12.5px; color: #78350f; line-height: 1.5;
}
.cancel-flow-warning .material-icons { color: #d97706; font-size: 20px; flex-shrink: 0; margin-top: 1px; }

.cancel-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.cancel-mode-card {
    cursor: pointer; padding: 14px; border: 2px solid #e5e7eb; border-radius: 12px;
    background: white; transition: all 0.2s; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cancel-mode-card:hover { border-color: #c7d2fe; background: #fafbff; }
.cancel-mode-card.selected {
    border-color: #6366f1; background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}
.cancel-mode-card .material-icons { font-size: 28px; color: #94a3b8; transition: color 0.2s; }
.cancel-mode-card.selected .material-icons { color: #6366f1; }
.cancel-mode-card .cm-title { font-size: 12px; font-weight: 700; color: #1e293b; }
.cancel-mode-card .cm-sub { font-size: 10px; color: #64748b; line-height: 1.3; }
.cancel-mode-card input[type="radio"] { display: none; }

.cancel-track-input {
    width: 100%; padding: 11px 14px; border: 2px solid #e5e7eb; border-radius: 10px;
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace; transition: all 0.2s;
    letter-spacing: 0.5px;
}
.cancel-track-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.08); }
.cancel-track-label { display: block; font-weight: 700; font-size: 11px; color: #4f46e5; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.cancel-track-hint { font-size: 11px; color: #64748b; margin-top: 6px; line-height: 1.4; }

@media (max-width: 600px) {
    .track-modal-header { padding: 16px 18px; }
    .track-modal-h { font-size: 16px; }
    .track-tab { padding: 12px 14px; font-size: 12px; }
    .track-tab-pane { padding: 16px 18px; }
    .cancel-mode-grid { grid-template-columns: 1fr; }
}

/* Modais & Drawer */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: white; padding: 28px; border-radius: var(--radius); width: 100%; max-width: 600px; box-shadow: 0 25px 60px rgba(0,0,0,0.25); animation: slideIn 0.3s; max-height: 90vh; overflow-y: auto; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-gap { display: flex; gap: 10px; align-items: center; }
.hidden { display: none !important; }
.drawer { position: fixed; top: 0; right: -500px; width: 420px; max-width: 90%; height: 100%; background: white; box-shadow: -8px 0 30px rgba(0,0,0,0.15); transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 1100; display: flex; flex-direction: column; }
.drawer.open { right: 0; }
/* Avisos (SweetAlert) sempre por cima do drawer e dos painéis — o padrão (1060) ficava atrás do drawer */
.swal2-container { z-index: 1300 !important; }
.drawer-header { padding: 25px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #fff; }
.drawer-body { padding: 25px; flex: 1; overflow-y: auto; }
.btn-link-client { background: #f0f2f5; color: #555; border: 1px dashed #ccc; padding: 6px 12px; border-radius: 20px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; font-size: 12px; }
.btn-link-client:hover { background: #e4e6e9; color: #333; }
.client-info {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; transition: all 0.15s;
    padding: 2px 4px; border-radius: 8px;
}
.client-info:hover { background: #fafbff; transform: translateX(1px); }
.client-info-body { min-width: 0; flex: 1; }

.avatar {
    width: 32px; height: 32px;
    background: var(--primary); color: white;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.avatar.avatar-lc {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.avatar.avatar-unidade {
    background: linear-gradient(135deg, var(--primary), #c2410c);
    box-shadow: 0 2px 8px rgba(234,88,12,0.25);
}

/* Nome da pessoa em destaque + tag pequena ao lado */
.client-pessoa {
    font-size: 13px; font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.client-tag {
    display: inline-block;
    font-size: 9.5px; font-weight: 800;
    padding: 1px 7px; border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.4;
    vertical-align: middle;
}
.client-tag-lc {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}
.client-tag-unidade {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.client-fone {
    font-size: 11px; color: #94a3b8;
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
}

/* Card de instituição no drawer salvo (LC/Unidade destacado) */
.sv-inst-card {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 16px 4px;
    padding: 12px;
    border-radius: 11px;
    border: 1px solid;
}
.sv-inst-lc {
    background: linear-gradient(135deg, #eef2ff, #ede9fe);
    border-color: #c7d2fe;
}
.sv-inst-unidade {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: #fed7aa;
}
.sv-inst-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: white; flex-shrink: 0;
}
.sv-inst-icon .material-icons { font-size: 20px !important; }
.sv-inst-lc .sv-inst-icon { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 4px 10px rgba(99,102,241,0.25); }
.sv-inst-unidade .sv-inst-icon { background: linear-gradient(135deg, var(--primary), #c2410c); box-shadow: 0 4px 10px rgba(234,88,12,0.25); }
.sv-inst-body { min-width: 0; flex: 1; }
.sv-inst-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: #64748b;
}
.sv-inst-lc .sv-inst-label { color: #6366f1; }
.sv-inst-unidade .sv-inst-label { color: var(--primary); }
.sv-inst-name {
    font-size: 14px; font-weight: 800;
    color: #1e293b;
    margin-top: 2px;
    word-break: break-word;
    line-height: 1.3;
}
.sv-inst-code {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: #64748b;
    margin-top: 4px;
    background: rgba(255,255,255,0.6);
    padding: 2px 8px; border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
}
.sv-inst-code .material-icons { font-size: 12px !important; }
.sv-inst-code b { color: #4338ca; font-weight: 800; }

/* Timeline (legacy compatível) */
.tracking-timeline { border-left: 2px solid #e5e7eb; margin-left: 10px; padding-left: 20px; padding-bottom: 10px; }
.timeline-event { position: relative; margin-bottom: 25px; }
.timeline-event::before { content: ''; position: absolute; left: -26px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; border: 2px solid white; box-shadow: 0 0 0 2px #e5e7eb; }
.timeline-event.latest::before { background: var(--success); box-shadow: 0 0 0 2px #dcfce7; }
.timeline-date { font-size: 12px; color: #6b7280; font-weight: 600; margin-bottom: 4px; }
.timeline-title { font-size: 14px; font-weight: bold; color: #1f2937; }
.timeline-desc { font-size: 13px; color: #4b5563; margin-top: 2px; }
.timeline-loc { font-size: 11px; color: #9ca3af; margin-top: 4px; font-style: italic; }

/* ============================================
   TIMELINE ESTILO CORREIOS (detalhada)
   ============================================ */
.correios-timeline { padding: 6px 4px 0; }
.correios-event {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding-bottom: 18px;
    position: relative;
    animation: correiosFadeIn 0.3s ease-out;
}
@keyframes correiosFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.correios-icon-wrap {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
}
.correios-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 2px solid #cbd5e1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 2; position: relative;
    transition: all 0.2s;
}
.correios-icon .material-icons {
    font-size: 19px !important; color: #64748b;
}
.correios-line {
    position: absolute;
    top: 40px; bottom: -22px;
    left: 50%; transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(180deg, #cbd5e1 0%, #cbd5e1 70%, transparent);
    z-index: 1;
}

/* Estados — cores por tipo de evento */
.correios-event.is-latest .correios-icon {
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
    transform: scale(1.05);
}
.correios-event.evt-delivered .correios-icon {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-color: #10b981;
}
.correios-event.evt-delivered .correios-icon .material-icons { color: #059669; }
.correios-event.evt-delivered.is-latest .correios-icon { box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }

.correios-event.evt-out-for-delivery .correios-icon {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #f59e0b;
}
.correios-event.evt-out-for-delivery .correios-icon .material-icons { color: #d97706; }
.correios-event.evt-out-for-delivery.is-latest .correios-icon { box-shadow: 0 0 0 4px rgba(245,158,11,0.18); }

.correios-event.evt-transit .correios-icon {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-color: #3b82f6;
}
.correios-event.evt-transit .correios-icon .material-icons { color: #2563eb; }
.correios-event.evt-transit.is-latest .correios-icon { box-shadow: 0 0 0 4px rgba(59,130,246,0.18); }

.correios-event.evt-posted .correios-icon {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border-color: #8b5cf6;
}
.correios-event.evt-posted .correios-icon .material-icons { color: #7c3aed; }

.correios-event.evt-pickup .correios-icon {
    background: linear-gradient(135deg, #cffafe, #a5f3fc);
    border-color: #06b6d4;
}
.correios-event.evt-pickup .correios-icon .material-icons { color: #0891b2; }

.correios-event.evt-returned .correios-icon {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-color: #ef4444;
}
.correios-event.evt-returned .correios-icon .material-icons { color: #dc2626; }

.correios-event.evt-warn .correios-icon {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    border-color: #f97316;
}
.correios-event.evt-warn .correios-icon .material-icons { color: #c2410c; }

.correios-event.evt-pending .correios-icon { animation: correiosPulse 2s ease-in-out infinite; }
@keyframes correiosPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Conteúdo do evento */
.correios-content { padding-top: 4px; padding-bottom: 4px; }
.evt-title {
    font-size: 13.5px; font-weight: 700; color: #0f172a;
    line-height: 1.35; letter-spacing: -0.1px;
}
.correios-event.is-latest .evt-title { color: #4338ca; }

.evt-loc { margin-top: 5px; }
.evt-loc-row {
    font-size: 12px; color: #475569; line-height: 1.5;
    font-weight: 500;
}
.evt-loc-label {
    display: inline-block;
    background: #f1f5f9; color: #64748b;
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 1px 6px; border-radius: 4px;
    margin-right: 4px;
    vertical-align: middle;
}

.evt-detail {
    margin-top: 6px;
    font-size: 11.5px; color: #64748b;
    background: rgba(99,102,241,0.05);
    border-left: 3px solid #c7d2fe;
    padding: 6px 9px;
    border-radius: 0 6px 6px 0;
    line-height: 1.4;
}

.evt-date {
    margin-top: 6px;
    font-size: 11px; color: #94a3b8;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.3px;
    display: inline-flex; align-items: center; gap: 4px;
}
.evt-date::before {
    content: 'schedule'; font-family: 'Material Icons';
    font-size: 12px; vertical-align: middle;
    color: #cbd5e1;
}

@media (max-width: 600px) {
    .correios-event { grid-template-columns: 36px 1fr; gap: 10px; padding-bottom: 14px; }
    .correios-icon { width: 32px; height: 32px; }
    .correios-icon .material-icons { font-size: 16px !important; }
    .correios-line { top: 32px; bottom: -18px; }
    .evt-title { font-size: 12.5px; }
    .evt-loc-row { font-size: 11.5px; }
    .evt-detail { font-size: 11px; }
}

/* ====================== PRATELEIRAS 2D / 3D ====================== */
/* Alternador segmentado com "thumb" deslizante */
.vdt {
    position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex-shrink: 0;
    padding: 4px; border-radius: 999px; background: #fff; isolation: isolate;
    border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(26,26,46,.06);
}
.vdt-thumb {
    position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
    border-radius: 999px; background: linear-gradient(135deg, #1a1a2e, #34345a);
    box-shadow: 0 4px 14px rgba(26,26,46,.28);
    transition: transform .55s cubic-bezier(.34,1.56,.64,1), background .45s ease, box-shadow .45s ease;
}
.vdt[data-mode="3d"] .vdt-thumb {
    transform: translateX(100%);
    background: linear-gradient(135deg, #ea580c, #fb923c);
    box-shadow: 0 6px 18px rgba(234,88,12,.4);
}
.vdt-btn {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 80px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent;
    font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .4px; color: var(--text-muted);
    cursor: pointer; transition: color .3s ease;
}
.vdt-btn .material-icons { font-size: 18px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.vdt-btn:hover:not(.active) { color: var(--text-main); }
.vdt-btn.active { color: #fff; }
.vdt-btn[data-mode="3d"].active .material-icons { transform: rotate(-12deg) scale(1.12); }
.vdt-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.vdt-dot {
    position: absolute; top: 6px; right: 10px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary); animation: vdtPulseOrange 1.8s infinite;
}
.vdt-btn.active .vdt-dot { display: none; }
@keyframes vdtPulseOrange { 0% { box-shadow: 0 0 0 0 rgba(234,88,12,.55); } 70% { box-shadow: 0 0 0 7px rgba(234,88,12,0); } 100% { box-shadow: 0 0 0 0 rgba(234,88,12,0); } }

/* Cabeçalho: ferramentas de 2D somem no 3D e vice-versa */
#section-stock:not(.is-3d) #toolbar-3d { display: none; }
#section-stock.is-3d #toolbar-normal,
#section-stock.is-3d #toolbar-layout,
#section-stock.is-3d #zoom-control-box { display: none !important; }

/* Status "Ao vivo" vindo da sala 3D */
.s3d-live {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
}
.s3d-live i { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; animation: s3dPulseAmber 1.6s infinite; }
.s3d-live[data-state="live"] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.s3d-live[data-state="live"] i { background: #10b981; animation-name: s3dPulseGreen; }
.s3d-live[data-state="error"] { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.s3d-live[data-state="error"] i { background: #ef4444; animation: none; }
@keyframes s3dPulseAmber { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 70% { box-shadow: 0 0 0 7px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
@keyframes s3dPulseGreen { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

/* Troca de visão: o plano 2D "deita" no chão e a sala 3D sobe */
.stock-views { position: relative; }
.stock-view.is-hidden { display: none; }
.stock-view.view-leaving { position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; }
.stock-views.to-3d #stock-2d-view.view-leaving { transform-origin: 50% 0; animation: s2dFlatten .7s cubic-bezier(.65,0,.35,1) forwards; }
.stock-views.to-3d #stock-3d-view.view-entering { transform-origin: 50% 100%; animation: s3dRise .75s cubic-bezier(.16,1,.3,1) .12s both; }
.stock-views.to-2d #stock-3d-view.view-leaving { transform-origin: 50% 30%; animation: s3dSink .5s cubic-bezier(.4,0,1,1) forwards; }
.stock-views.to-2d #stock-2d-view.view-entering { transform-origin: 50% 0; animation: s2dStandUp .72s cubic-bezier(.2,.9,.25,1.06) .15s both; }
@keyframes s2dFlatten {
    0%   { opacity: 1; transform: perspective(1400px) rotateX(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: perspective(1400px) rotateX(64deg) translateY(-20px) scale(.86); filter: blur(4px); }
}
@keyframes s3dRise {
    0%   { opacity: 0; transform: perspective(1400px) translateY(48px) rotateX(-9deg) scale(.95); filter: blur(8px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
}
@keyframes s3dSink {
    0%   { opacity: 1; transform: none; filter: none; }
    100% { opacity: 0; transform: perspective(1400px) translateY(28px) rotateX(8deg) scale(.95); filter: blur(6px); }
}
@keyframes s2dStandUp {
    0%   { opacity: 0; transform: perspective(1400px) rotateX(64deg) translateY(-20px) scale(.88); filter: blur(4px); }
    100% { opacity: 1; transform: none; filter: none; }
}
/* Faixa de luz que "escaneia" a sala ao entrar no 3D */
.stock-views.to-3d .s3d-stage::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: 6; pointer-events: none;
    background: linear-gradient(180deg, rgba(251,146,60,0) 0%, rgba(251,146,60,.22) 70%, rgba(251,146,60,.85) 74%, rgba(251,146,60,0) 78%);
    animation: s3dScan 1s cubic-bezier(.4,0,.2,1) .2s both;
}
@keyframes s3dScan { from { transform: translateY(-140px); opacity: 1; } to { transform: translateY(var(--s3d-avail, 700px)); opacity: 0; } }

/* Palco da sala 3D */
.s3d-stage { position: relative; border-radius: 20px; overflow: hidden; }
.s3d-frame {
    display: block; width: 100%; height: var(--s3d-avail, 640px); border: 0;
    background: transparent; transition: height .35s ease;
}

/* Overlay de carregamento */
.s3d-loader {
    position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; overflow: hidden;
    border-radius: 20px; color: #fff;
    background: radial-gradient(120% 90% at 50% 18%, #1f3d63 0%, #142842 45%, #0b1626 100%);
    transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1), filter .6s ease;
}
.s3d-loader.is-done { opacity: 0; transform: scale(1.04); filter: blur(6px); pointer-events: none; }
.s3d-floor {
    position: absolute; left: -60%; right: -60%; bottom: 0; height: 70%;
    background-image:
        linear-gradient(rgba(251,146,60,.34) 1px, transparent 1px),
        linear-gradient(90deg, rgba(251,146,60,.34) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(480px) rotateX(62deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 92%);
            mask-image: linear-gradient(to top, #000 5%, transparent 92%);
    animation: s3dFloor 1.4s linear infinite;
}
@keyframes s3dFloor { from { background-position: 0 0, 0 0; } to { background-position: 0 56px, 0 0; } }
.s3d-glow {
    position: absolute; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(234,88,12,.32), transparent 65%); filter: blur(10px);
    animation: s3dGlow 3s ease-in-out infinite alternate;
}
@keyframes s3dGlow { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.1); opacity: 1; } }
.s3d-loader-core { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; }

/* Planta isométrica que se desenha: piso → grade → paredes → estantes → caixas → mesa → porta.
   Cada traço usa pathLength=1 e o atraso --d; o ciclo desenha, segura e apaga em onda. */
.s3d-bp {
    width: min(380px, 76vw); height: auto; margin-bottom: 26px; overflow: visible;
    filter: drop-shadow(0 0 5px rgba(251,146,60,.55));
}
.s3d-bp path {
    fill: none; stroke: #fb923c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
    animation: bpDraw 4.4s cubic-bezier(.65,0,.35,1) var(--d, 0s) infinite;
}
.s3d-bp .bp-floor { stroke: #fdba74; stroke-width: 1.8; }
.s3d-bp .bp-grid { stroke: rgba(251,146,60,.4); stroke-width: .8; }
.s3d-bp .bp-wall { stroke: #fdba74; animation-name: bpDrawWall; }
.s3d-bp .bp-rack { stroke: #fb923c; stroke-width: 1.3; }
.s3d-bp .bp-box { stroke: #fed7aa; stroke-width: 1; animation-name: bpDrawBox; }
.s3d-bp .bp-accent { stroke: #34d399; stroke-width: 1.6; }
@keyframes bpDraw {
    0%       { stroke-dashoffset: 1; opacity: 0; }
    5%       { opacity: 1; }
    26%      { stroke-dashoffset: 0; }
    80%      { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes bpDrawWall {
    0%       { stroke-dashoffset: 1; opacity: 0; fill: rgba(251,146,60,0); }
    5%       { opacity: 1; }
    26%      { stroke-dashoffset: 0; fill: rgba(251,146,60,0); }
    36%      { fill: rgba(251,146,60,.08); }
    80%      { stroke-dashoffset: 0; opacity: 1; fill: rgba(251,146,60,.08); }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes bpDrawBox {
    0%       { stroke-dashoffset: 1; opacity: 0; fill: rgba(251,146,60,0); }
    5%       { opacity: 1; }
    22%      { stroke-dashoffset: 0; fill: rgba(251,146,60,0); }
    32%      { fill: rgba(251,146,60,.38); }
    80%      { stroke-dashoffset: 0; opacity: 1; fill: rgba(251,146,60,.38); }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.s3d-loader-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.s3d-loader-sub { margin-top: 6px; min-height: 18px; font-size: 13px; color: rgba(255,255,255,.72); }
.s3d-loader-bar { position: relative; width: 220px; height: 4px; margin-top: 18px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.s3d-loader-bar span {
    position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: inherit;
    background: linear-gradient(90deg, transparent, #fb923c, #ea580c, transparent);
    animation: s3dBar 1.3s ease-in-out infinite;
}
@keyframes s3dBar { from { left: -40%; } to { left: 100%; } }
.s3d-loader-hint { margin-top: 14px; font-size: 11.5px; color: rgba(255,255,255,.45); }
.s3d-loader.is-error .s3d-bp { filter: drop-shadow(0 0 5px rgba(248,113,113,.5)); }
.s3d-loader.is-error .s3d-bp path { animation: none; stroke-dashoffset: 0; opacity: .75; stroke: #f87171; fill: none; }
.s3d-loader.is-error .s3d-bp .bp-grid { stroke: rgba(248,113,113,.35); }
.s3d-loader.is-error .s3d-loader-bar,
.s3d-loader.is-error .s3d-loader-hint { display: none; }
.s3d-retry {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; padding: 10px 18px;
    border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #ea580c, #fb923c); box-shadow: 0 8px 20px rgba(234,88,12,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.s3d-retry .material-icons { font-size: 18px; }
.s3d-retry:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(234,88,12,.45); }

/* Tela cheia */
.s3d-stage:fullscreen { background: var(--bg-light); padding: 16px; border-radius: 0; overflow: auto; }
.s3d-stage:fullscreen .s3d-loader { border-radius: 0; }

@media (max-width: 768px) {
    .stock-header-left { flex-wrap: wrap; }
    .s3d-toolbar { flex-wrap: wrap; }
    .s3d-toolbar .btn { width: auto; flex: 1 1 auto; }
    .s3d-stage, .s3d-loader { border-radius: 16px; }
    .s3d-glow { width: 360px; height: 360px; }
}

/* ====================== DASHBOARD: APIs & INTEGRAÇÕES ====================== */
.dash-header-actions { flex-wrap: wrap; }
.btn-apis {
    color: #fff !important; border: 0 !important; background: linear-gradient(135deg, #0f172a, #312e81) !important;
    box-shadow: 0 6px 18px rgba(49,46,129,.3); transition: transform .2s ease, box-shadow .2s ease;
}
.btn-apis:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(49,46,129,.4); }
.btn-apis-icon { position: relative; display: inline-flex; }
.btn-apis-icon .material-icons { font-size: 18px; }
.btn-apis-icon i { position: absolute; right: -3px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #1e1b4b; background: #94a3b8; }
.btn-apis-icon i[data-state="online"] { background: #22c55e; }
.btn-apis-icon i[data-state="slow"] { background: #f59e0b; }
.btn-apis-icon i[data-state="offline"] { background: #ef4444; }

/* Painel no estilo "página de status": aviso no topo + lista limpa */
body.ap-lock { overflow: hidden; }
.ap-overlay {
    position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 24px;
    background: rgba(15,23,42,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ap-overlay.open { display: flex; animation: apFade .2s ease; }
@keyframes apFade { from { opacity: 0; } to { opacity: 1; } }
.ap-panel {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    width: min(640px, 100%); max-height: min(880px, calc(100vh - 48px)); border-radius: 24px; background: #fff;
    box-shadow: 0 30px 80px rgba(15,23,42,.3); animation: apRise .3s cubic-bezier(.16,1,.3,1);
}
.ap-view { padding: 22px; overflow-y: auto; scrollbar-width: thin; }
.ap-view-detail { display: none; }
.ap-panel.show-detail .ap-view-list { display: none; }
.ap-panel.show-detail .ap-view-detail { display: block; animation: apSlideIn .32s cubic-bezier(.16,1,.3,1); }
.ap-panel:not(.show-detail) .ap-view-list { animation: apSlideBack .32s cubic-bezier(.16,1,.3,1); }
@keyframes apSlideIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes apSlideBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes apRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.ap-head { display: flex; align-items: center; gap: 14px; }
.ap-head-ico {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #312e81, #6366f1); box-shadow: 0 8px 18px rgba(99,102,241,.3);
}
.ap-head-ico .material-icons { font-size: 22px; }
.ap-head-text { flex: 1; min-width: 0; }
.ap-head h2 { margin: 0; font-size: 19px; font-weight: 800; color: #0f172a; letter-spacing: -.3px; }
.ap-head p { margin: 2px 0 0; font-size: 13px; color: #64748b; }
.ap-close {
    width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
    color: #475569; background: #f1f5f9; transition: background .2s, transform .2s;
}
.ap-close:hover { background: #e2e8f0; transform: rotate(90deg); }

.ap-banner { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; padding: 14px 12px 14px 16px; border-radius: 16px; transition: background .3s, color .3s; }
.ap-banner-ico { font-size: 28px !important; }
.ap-banner-text { flex: 1; min-width: 0; }
.ap-banner-text b { display: block; font-size: 15px; font-weight: 800; }
.ap-banner-text small { display: block; margin-top: 1px; font-size: 12.5px; opacity: .8; }
.ap-banner.online { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #065f46; }
.ap-banner.online .ap-banner-ico { color: #10b981; }
.ap-banner.slow { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #92400e; }
.ap-banner.slow .ap-banner-ico { color: #f59e0b; }
.ap-banner.offline { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #991b1b; }
.ap-banner.offline .ap-banner-ico { color: #ef4444; }
.ap-banner.checking { background: #eef2ff; color: #3730a3; }
.ap-banner.checking .ap-banner-ico { color: #6366f1; }
.ap-recheck {
    width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
    color: inherit; background: rgba(255,255,255,.75); transition: background .2s;
}
.ap-recheck:hover:not(:disabled) { background: #fff; }
.ap-recheck:disabled { cursor: default; opacity: .7; }
.ap-spin { animation: spin .9s linear infinite; }

.ap-list { list-style: none; margin: 0; padding: 0; }
.ap-row {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto 18px; align-items: center; gap: 12px; cursor: pointer;
    padding: 11px 6px 11px 8px; border-bottom: 1px solid #f1f5f9; border-radius: 12px; transition: background .15s; outline: none;
}
.ap-row:focus-visible { box-shadow: 0 0 0 2px #a5b4fc; }
.ap-chev { font-size: 20px !important; color: #cbd5e1; transition: transform .2s, color .2s; }
.ap-row:hover .ap-chev { transform: translateX(3px); color: #6366f1; }
.ap-row:last-child { border-bottom: 0; }
.ap-row:hover { background: #f8fafc; }
.ap-list.intro .ap-row { animation: apRowIn .35s ease both; animation-delay: calc(var(--i) * 35ms); }
@keyframes apRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ap-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.ap-ico .material-icons { font-size: 20px; }
.ap-name { min-width: 0; }
.ap-name b { display: block; font-size: 14.5px; font-weight: 700; color: #0f172a; }
.ap-name small { display: block; font-size: 12.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-row.offline .ap-name small { color: #dc2626; }
.ap-row.slow .ap-name small { color: #b45309; }
.ap-ms { font-size: 12px; color: #94a3b8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ap-state i { width: 7px; height: 7px; border-radius: 50%; }
.ap-state.online { color: #047857; background: #ecfdf5; } .ap-state.online i { background: #10b981; }
.ap-state.slow { color: #b45309; background: #fffbeb; } .ap-state.slow i { background: #f59e0b; }
.ap-state.offline { color: #b91c1c; background: #fef2f2; } .ap-state.offline i { background: #ef4444; }
.ap-state.checking { color: #4338ca; background: #eef2ff; } .ap-state.checking i { background: #818cf8; animation: pulse-yellow 1s infinite; }
.ap-state.idle { color: #475569; background: #f1f5f9; } .ap-state.idle i { background: #94a3b8; }

/* Tela de Configurações de uma integração */
.ap-back {
    display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 12px -8px; padding: 6px 10px 6px 6px; border: 0; border-radius: 10px;
    background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #6366f1; transition: background .15s;
}
.ap-back:hover { background: #eef2ff; }
.ap-back .material-icons { font-size: 19px; }
.ap-dv-head { display: flex; align-items: center; gap: 14px; }
.ap-ico-lg { width: 54px; height: 54px; border-radius: 17px; }
.ap-ico-lg .material-icons { font-size: 27px; }
.ap-dv-title { flex: 1; min-width: 0; }
.ap-dv-title h3 { margin: 0; font-size: 20px; font-weight: 800; color: #0f172a; letter-spacing: -.3px; }
.ap-dv-title small { font-size: 12.5px; color: #64748b; }
.ap-dv-status { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; padding: 11px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; }
.ap-dv-status .material-icons { font-size: 18px; }
.ap-dv-status b { margin-left: auto; padding-left: 10px; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .8; }
.ap-dv-status.online { background: #ecfdf5; color: #065f46; } .ap-dv-status.online .material-icons { color: #10b981; }
.ap-dv-status.offline { background: #fef2f2; color: #991b1b; } .ap-dv-status.offline .material-icons { color: #ef4444; }
.ap-dv-status.slow { background: #fffbeb; color: #92400e; } .ap-dv-status.slow .material-icons { color: #f59e0b; }
.ap-dv-status.checking { background: #eef2ff; color: #3730a3; } .ap-dv-status.checking .material-icons { color: #6366f1; animation: spin 1s linear infinite; }
.ap-dv-status.idle { background: #f1f5f9; color: #475569; } .ap-dv-status.idle .material-icons { color: #94a3b8; }
.ap-sec { margin-top: 20px; }
.ap-sec-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #94a3b8; }
.ap-sec-title .material-icons { font-size: 16px; }
.ap-kvs { margin: 0; border: 1px solid #eef0f6; border-radius: 14px; overflow: hidden; }
.ap-kv { display: grid; grid-template-columns: minmax(120px, 36%) minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 14px; border-bottom: 1px solid #f1f5f9; }
.ap-kv:last-child { border-bottom: 0; }
.ap-kv dt { margin: 0; padding-top: 2px; font-size: 12.5px; font-weight: 600; color: #64748b; }
.ap-kv dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: #0f172a; word-break: break-word; }
.ap-kv dd small { flex-basis: 100%; font-size: 11.5px; color: #94a3b8; }
.ap-mono { padding: 2px 7px; border-radius: 6px; background: #f1f5f9; color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.ap-kv.secret dd { color: #64748b; }
.ap-secret-val { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; }
.ap-secret-val .material-icons { font-size: 15px; letter-spacing: 0; color: #94a3b8; }
.ap-copy {
    width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center;
    background: transparent; color: #94a3b8; transition: background .15s, color .15s;
}
.ap-copy:hover { background: #f1f5f9; color: #475569; }
.ap-copy.ok { color: #10b981; }
.ap-copy .material-icons { font-size: 16px; }
.ap-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-items li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; border-radius: 12px; background: #f8fafc; }
.ap-items code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; color: #4338ca; }
.ap-items small { font-size: 12px; color: #64748b; }
.ap-uses { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-uses span { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #4338ca; background: #eef2ff; }
.ap-dv-actions {
    position: sticky; bottom: -22px; display: flex; justify-content: flex-end; margin: 22px -22px -22px; padding: 16px 22px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 35%);
}
.ap-edit {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 12px; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #312e81, #6366f1);
    box-shadow: 0 8px 20px rgba(99,102,241,.3); transition: transform .2s, box-shadow .2s;
}
.ap-edit:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(99,102,241,.4); }
.ap-edit .material-icons { font-size: 18px; }

/* Aviso: alterações passam pelo administrador (Teams) */
.ap-notice-wrap {
    position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; padding: 20px;
    background: rgba(15,23,42,.35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ap-notice-wrap.open { display: flex; animation: apFade .2s ease; }
.ap-notice {
    width: min(400px, 100%); padding: 26px 24px 16px; border-radius: 22px; background: #fff; text-align: center;
    box-shadow: 0 24px 60px rgba(15,23,42,.3); animation: apNotice .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes apNotice { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: none; } }
.ap-notice-art {
    width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #5b5fc7, #7b83eb); box-shadow: 0 12px 26px rgba(91,95,199,.35);
}
.ap-notice-art .material-icons { font-size: 32px; }
.ap-notice h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: #0f172a; letter-spacing: -.2px; }
.ap-notice p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #475569; }
.ap-contact { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; border-radius: 16px; background: #f5f5fd; border: 1px solid #e4e5fb; text-align: left; }
.ap-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #5b5fc7, #7b83eb); }
.ap-contact-text { flex: 1; min-width: 0; }
.ap-contact-text b { display: block; font-size: 14px; color: #0f172a; }
.ap-contact-text small { display: block; font-size: 12.5px; color: #5b5fc7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-teams {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 14px;
    text-decoration: none; font-size: 14px; font-weight: 700; color: #fff; background: #5b5fc7;
    box-shadow: 0 8px 20px rgba(91,95,199,.35); transition: background .2s, transform .2s;
}
.ap-teams:hover { background: #4f52b2; transform: translateY(-1px); }
.ap-teams-logo { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: #fff; color: #5b5fc7; font-size: 14px; font-weight: 900; }
.ap-notice-close { margin-top: 8px; padding: 8px 14px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: #64748b; }
.ap-notice-close:hover { background: #f1f5f9; }

@media (max-width: 600px) {
    .ap-overlay { padding: 0; }
    .ap-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; }
    .ap-view { padding: 18px 14px; }
    .ap-row { grid-template-columns: 36px minmax(0, 1fr) auto 16px; gap: 10px; padding: 10px 2px 10px 4px; }
    .ap-ms { display: none; }
    .ap-kv { grid-template-columns: 1fr; gap: 3px; }
    .ap-dv-actions { bottom: -18px; margin: 22px -14px -18px; padding: 14px; }
    .ap-edit { width: 100%; justify-content: center; }
}

/* ====================== CNPJ → RAZÃO SOCIAL (estados do campo) ====================== */
.cnpj-busy {
    border-color: #a5b4fc !important;
    background: linear-gradient(90deg, #fff 0%, #eef2ff 50%, #fff 100%) !important;
    background-size: 200% 100% !important; animation: cnpjShimmer 1.1s linear infinite;
}
@keyframes cnpjShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cnpj-ok { border-color: #34d399 !important; border-style: solid !important; box-shadow: 0 0 0 3px rgba(16,185,129,.1); }
.cnpj-erro { border-color: #f87171 !important; border-style: solid !important; background: #fef2f2 !important; }
.cnpj-erro::placeholder { color: #dc2626; opacity: 1; font-weight: 600; }
.cnpj-manual { border-color: #f59e0b !important; border-style: solid !important; background: #fffbeb !important; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.cnpj-manual::placeholder { color: #b45309; opacity: 1; font-weight: 600; }

/* ====================== ENVIOS: FILTRO POR DATA ====================== */
/* Botão (mesmo tamanho/estilo dos selects de status e origem) */
.sp-wrap { position: relative; }
.sp-trigger {
    width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; margin: 0;
    border-radius: 12px; border: 1.5px solid var(--border); background: #f8fafc;
    font: inherit; font-size: 13px; color: var(--text-main); text-align: left; white-space: nowrap;
    cursor: pointer; transition: all .25s;
}
.sp-trigger-icon { font-size: 18px !important; color: #94a3b8; transition: color .2s; }
.sp-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp-trigger-caret { font-size: 18px !important; color: #94a3b8; transition: transform .25s; }
.sp-trigger:hover { border-color: #c4b5fd; background: #fff; }
.sp-wrap.open .sp-trigger { border-color: var(--purple); background: #fff; box-shadow: 0 0 0 3px rgba(139,92,246,.08); }
.sp-wrap.open .sp-trigger-caret { transform: rotate(180deg); }
.sp-wrap.active .sp-trigger { border-color: #fdba74; background: #fff7ed; color: #c2410c; font-weight: 700; padding-right: 40px; }
.sp-wrap.active .sp-trigger-icon { color: #ea580c; }
.sp-wrap.active .sp-trigger-caret { display: none; }
.sp-trigger-clear {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%;
    border: 0; display: grid; place-items: center; background: #fed7aa; color: #9a3412; cursor: pointer; transition: background .2s;
}
.sp-trigger-clear:hover { background: #fdba74; }
.sp-trigger-clear .material-icons { font-size: 15px; }
.sp-trigger-clear[hidden] { display: none; }

/* Janelinha */
.sp-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 420px; max-width: calc(100vw - 32px);
    padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #eef0f4;
    box-shadow: 0 24px 60px rgba(15,23,42,.18), 0 4px 14px rgba(15,23,42,.06);
    transform-origin: top right; animation: spPop .22s cubic-bezier(.16,1,.3,1);
}
.sp-pop[hidden] { display: none; }
@keyframes spPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.sp-backdrop { display: none; }

/* Chave segmentada: Mês | Dia | Personalizado */
.sp-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: #eef1f6; }
.sp-seg button {
    border: 0; border-radius: 9px; padding: 8px 6px; font: inherit; font-size: 12.5px; font-weight: 700; color: #334155;
    background: transparent; cursor: pointer; transition: all .2s;
}
.sp-seg button:hover:not(.active) { background: rgba(255,255,255,.75); }
.sp-seg button.active { background: #0f1b2d; color: #fff; box-shadow: 0 4px 10px rgba(15,27,45,.25); }

/* ‹ ano / mês › */
.sp-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 2px 10px; }
.sp-nav button {
    width: 32px; height: 32px; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
    display: grid; place-items: center; color: #0f1b2d; transition: all .2s;
}
.sp-nav button:hover:not(:disabled) { background: #0f1b2d; color: #fff; border-color: #0f1b2d; }
.sp-nav button:disabled { opacity: .35; cursor: default; }
.sp-nav-title { text-align: center; line-height: 1.25; }
.sp-nav-title b { display: block; font-size: 15px; font-weight: 800; color: #0f1b2d; }
.sp-nav-title small { font-size: 11.5px; color: var(--text-muted); }

/* Quadradinhos dos meses (com a quantidade de envios) */
.sp-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sp-month {
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 76px; padding: 10px 6px 14px; border: 0; border-radius: 14px; cursor: pointer; font: inherit;
    background: #eef2f7; color: #0f1b2d; transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.sp-month-name { font-size: 13px; font-weight: 800; }
.sp-month-count { font-size: 11px; font-weight: 600; color: #64748b; min-height: 14px; }
.sp-month-bar { position: absolute; left: 12px; right: 12px; bottom: 8px; height: 3px; border-radius: 999px; background: rgba(15,27,45,.06); }
.sp-month-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb923c, #ea580c); }
.sp-month:hover:not(:disabled):not(.sel) { background: #e2e8f1; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,23,42,.08); }
.sp-month.zero .sp-month-count { color: #a0aec0; }
.sp-month.cur::after { content: ''; position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: #ea580c; }
.sp-month.sel { background: #0f1b2d; color: #fff; box-shadow: 0 8px 20px rgba(15,27,45,.3); }
.sp-month.sel .sp-month-count { color: #fdba74; }
.sp-month.sel .sp-month-bar { background: rgba(255,255,255,.15); }
.sp-month:disabled { cursor: default; opacity: .4; }

/* Calendário (dia) */
.sp-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sp-wd { text-align: center; font-size: 11px; font-weight: 800; color: #94a3b8; padding: 2px 0 4px; }
.sp-day {
    height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; color: #0f1b2d;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: all .15s;
}
.sp-day.pad { cursor: default; }
.sp-day-n { font-size: 13px; font-weight: 700; }
.sp-day-c { font-size: 10px; font-weight: 800; color: #ea580c; min-height: 12px; line-height: 12px; }
.sp-day.has { background: #fff7ed; }
.sp-day:hover:not(:disabled):not(.pad):not(.sel) { background: #eef2f7; }
.sp-day.today { box-shadow: inset 0 0 0 1.5px #0f1b2d; }
.sp-day.sel { background: #0f1b2d; color: #fff; box-shadow: 0 6px 14px rgba(15,27,45,.28); }
.sp-day.sel .sp-day-c { color: #fdba74; }
.sp-day:disabled { opacity: .35; cursor: default; }

/* Personalizado (de → até) */
.sp-range { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; }
.sp-range label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; }
.sp-range input {
    width: 100%; margin: 0; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #e5e7eb; background: #f8fafc;
    font: inherit; font-size: 13px; color: #0f1b2d; text-transform: none; letter-spacing: 0;
}
.sp-range input:focus { outline: none; border-color: #0f1b2d; background: #fff; }
.sp-range-arrow { color: #cbd5e1; margin-bottom: 11px; }
.sp-range-count { display: flex; align-items: center; gap: 6px; margin: 14px 2px 12px; font-size: 13px; color: #475569; }
.sp-range-count .material-icons { font-size: 18px; color: #ea580c; }
.sp-range-count b { font-size: 16px; color: #0f1b2d; }
.sp-apply {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border: 0; border-radius: 12px;
    cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: #0f1b2d;
    box-shadow: 0 6px 16px rgba(15,27,45,.25); transition: transform .15s, box-shadow .15s;
}
.sp-apply .material-icons { font-size: 17px; }
.sp-apply:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,27,45,.32); }

/* Rodapé: resumo do mês sob o mouse + limpar */
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f3f6; }
.sp-info { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.45; color: #64748b; }
.sp-info .material-icons { font-size: 16px; color: #94a3b8; flex-shrink: 0; }
.sp-info b { color: #0f1b2d; }
.sp-clear-link { flex-shrink: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: #ea580c; padding: 5px 8px; border-radius: 8px; }
.sp-clear-link:hover { background: #fff7ed; }

/* Celular: a janelinha sobe de baixo, com fundo escurecido */
@media (max-width: 768px) {
    .sp-wrap.open .sp-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.38);
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: spFadeIn .2s ease;
    }
    .sp-pop {
        position: fixed; left: 10px; right: 10px; top: auto; bottom: 84px; width: auto; max-width: none; z-index: 1001;
        max-height: calc(100vh - 120px); overflow-y: auto; transform-origin: bottom center; animation: spSheet .28s cubic-bezier(.16,1,.3,1);
    }
    .sp-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@keyframes spSheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes spFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ====================== DEVOLVER AO ESTOQUE (envio sem cliente) ====================== */
.noclient-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.noclient-actions > button { white-space: nowrap; }
.btn-return-stock {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 9px; border-radius: 20px;
    font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
    color: #0f766e; background: linear-gradient(135deg, #f0fdfa, #ccfbf1); border: 1px solid #99f6e4;
    box-shadow: 0 1px 2px rgba(13,148,136,.08); transition: all .22s ease;
}
.btn-return-stock .material-icons { font-size: 15px; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.btn-return-stock:hover {
    color: #fff; border-color: #0d9488; background: linear-gradient(135deg, #0f766e, #14b8a6);
    transform: translateY(-1px); box-shadow: 0 6px 14px rgba(13,148,136,.3);
}
.btn-return-stock:hover .material-icons { transform: rotate(-45deg); }

/* ---------- Janela ---------- */
.rts-modal { max-width: 780px; padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; }

.rts-head {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 20px 22px;
    background: linear-gradient(135deg, #0b4f4a 0%, #0f766e 45%, #14b8a6 100%); color: #fff;
}
.rts-head-glow {
    position: absolute; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(153,246,228,.45), transparent 65%);
}
.rts-head::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .12;
    background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.rts-head-icon {
    position: relative; z-index: 1; width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 15px;
    background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 8px 18px rgba(0,0,0,.15);
}
.rts-head-icon .material-icons { font-size: 26px; }
.rts-head-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.rts-title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.rts-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.rts-tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
}
.rts-tag .material-icons { font-size: 14px; opacity: .85; }
.rts-tag.strong { background: #fff; color: #0f766e; border-color: #fff; font-weight: 800; letter-spacing: .4px; }
.rts-close {
    position: relative; z-index: 1; width: 38px; height: 38px; border: 0; border-radius: 11px; cursor: pointer;
    display: grid; place-items: center; background: rgba(255,255,255,.15); color: #fff; transition: background .2s, transform .2s;
}
.rts-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }

.rts-body { padding: 18px 22px 8px; overflow-y: auto; max-height: calc(90vh - 200px); }

/* Faixa "Envios → Estoque" com a caixa fazendo o caminho de volta */
.rts-journey {
    display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 14px;
    background: linear-gradient(135deg, #f0fdfa, #ecfeff); border: 1px solid #ccfbf1;
}
.rts-j-path { display: flex; align-items: center; flex-shrink: 0; }
.rts-j-node {
    width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
    background: #fff; color: #64748b; box-shadow: 0 2px 6px rgba(15,23,42,.08); border: 1px solid #e2e8f0;
}
.rts-j-node .material-icons { font-size: 19px; }
.rts-j-node.to { background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff; border-color: #0f766e; box-shadow: 0 4px 12px rgba(13,148,136,.3); }
.rts-j-track {
    position: relative; width: 70px; height: 2px; margin: 0 6px;
    background-image: linear-gradient(90deg, #5eead4 50%, transparent 50%); background-size: 8px 2px;
    animation: rtsDash .6s linear infinite;
}
@keyframes rtsDash { to { background-position: 8px 0; } }
.rts-j-box {
    position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px;
    display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #d4a843, #b8860b);
    box-shadow: 0 3px 8px rgba(184,134,11,.35); animation: rtsTravel 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
.rts-j-box .material-icons { font-size: 13px; }
@keyframes rtsTravel {
    0% { left: -4px; opacity: 0; transform: scale(.7); }
    15% { opacity: 1; transform: scale(1); }
    70% { left: calc(100% - 16px); opacity: 1; transform: scale(1); }
    85%, 100% { left: calc(100% - 16px); opacity: 0; transform: scale(.6); }
}
.rts-j-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; color: #134e4a; }
.rts-j-warn { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-weight: 700; color: #b45309; }
.rts-j-warn .material-icons { font-size: 16px; }

/* Atalho "Voltar para onde estava" */
.rts-origin {
    width: 100%; margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 11px 14px;
    border-radius: 14px; border: 1px dashed #5eead4; background: #fff; color: var(--text-main);
    font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: all .2s ease;
}
.rts-origin > .material-icons:first-child {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 19px;
    color: #0d9488; background: #f0fdfa;
}
.rts-origin small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.rts-origin > span:nth-child(2) { flex: 1; }
.rts-origin-go { color: #0d9488; transition: transform .2s; }
.rts-origin:hover { background: #f0fdfa; border-style: solid; box-shadow: 0 4px 14px rgba(13,148,136,.12); }
.rts-origin:hover .rts-origin-go { transform: translateX(4px); }
.rts-origin.busy { cursor: default; border: 1px solid #fde68a; background: #fffbeb; color: #92400e; }
.rts-origin.busy > .material-icons:first-child { color: #d97706; background: #fef3c7; }

.rts-label { margin: 18px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #8a95ad; }
.rts-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rts-legend { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--text-muted); }
.rts-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; margin-left: 6px; }
.rts-legend .lg-free { border: 1.5px dashed #5eead4; background: #f0fdfa; }
.rts-legend .lg-busy { background: linear-gradient(145deg, #d6c49c, #bfa878); }
.rts-legend .lg-sel { background: linear-gradient(145deg, #e8b94f, #c4943a); box-shadow: 0 0 0 2px #14b8a6; }
.rts-units, .rts-shelves { display: flex; flex-wrap: wrap; gap: 8px; }
.rts-units[hidden], .rts-label[hidden] { display: none; }
.rts-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); background: #fff; color: var(--text-main); font: inherit; font-size: 13px; font-weight: 600; transition: all .2s;
}
.rts-chip .material-icons { font-size: 16px; color: var(--text-muted); }
.rts-chip:hover:not(.active) { border-color: #99f6e4; }
.rts-chip.active { background: #0f766e; border-color: #0f766e; color: #fff; box-shadow: 0 4px 12px rgba(15,118,110,.25); }
.rts-chip.active .material-icons { color: #fff; }

/* Cartões de prateleira */
.rts-shelf {
    display: flex; flex-direction: column; gap: 7px; padding: 11px 14px; min-width: 190px; flex: 0 1 auto;
    border-radius: 14px; border: 1px solid var(--border); background: #fff; cursor: pointer; font: inherit; text-align: left;
    transition: all .2s ease;
}
.rts-shelf:hover:not(:disabled) { border-color: #5eead4; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(13,148,136,.12); }
.rts-shelf.active { border-color: #0d9488; background: linear-gradient(180deg, #f0fdfa, #fff); box-shadow: 0 0 0 3px rgba(13,148,136,.16); }
.rts-shelf:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.rts-shelf-top { display: flex; align-items: center; gap: 7px; }
.rts-shelf-top .material-icons { font-size: 18px; color: #1e40af; }
.rts-shelf-name { font-size: 13px; font-weight: 700; color: var(--text-main); }
.rts-shelf-bar { height: 5px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.rts-shelf-bar i { display: block; height: 100%; border-radius: inherit; transition: width .4s ease; }
.rts-shelf-bar.cool i { background: linear-gradient(90deg, #34d399, #16a34a); }
.rts-shelf-bar.warm i { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.rts-shelf-bar.hot i { background: linear-gradient(90deg, #f87171, #ef4444); }
.rts-shelf-free { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: #0d9488; }
.rts-shelf-free small { font-weight: 600; color: #94a3b8; font-variant-numeric: tabular-nums; }
.rts-shelf-free.none { color: #ef4444; }

/* Estante (mesmo visual do 2D: colunas azuis, travessas laranja, caixas de papelão) */
.rts-grid-wrap { overflow-x: auto; padding: 4px 2px 12px; }
.rts-rack {
    position: relative; padding: 14px 18px 10px 18px; border-radius: 16px; min-width: min-content;
    background: radial-gradient(120% 100% at 50% 0%, #ffffff, #f1f5f9); border: 1px solid #e2e8f0;
    box-shadow: inset 0 -12px 20px -16px rgba(15,23,42,.15);
}
.rts-rack::before, .rts-rack::after {
    content: ''; position: absolute; top: 10px; bottom: 10px; width: 8px; border-radius: 3px; z-index: 2;
    background: linear-gradient(180deg, #1e40af, #1e3a8a); box-shadow: 1px 0 3px rgba(0,0,0,.18);
}
.rts-rack::before { left: 8px; }
.rts-rack::after { right: 8px; }
.rts-rack-level { position: relative; display: flex; align-items: stretch; padding: 8px 6px 11px 6px; }
.rts-rack-level::after {
    content: ''; position: absolute; left: -10px; right: -10px; bottom: 0; height: 6px; border-radius: 2px; z-index: 1;
    background: linear-gradient(180deg, #f59e0b, #d97706); box-shadow: 0 2px 4px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.35);
}
.rts-rack-num {
    width: 34px; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800;
    color: #1e3a8a; opacity: .7; letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.rts-rack-slots { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(64px, 1fr)); gap: 8px; }

.rts-slot {
    position: relative; min-height: 58px; padding: 0; border: 0; background: transparent; font: inherit;
    display: flex; align-items: flex-end; justify-content: center;
}
/* Caixa de papelão */
.rts-box {
    position: relative; width: 100%; height: 50px; border-radius: 5px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #d4a843, #c4943a); border: 1px solid #b8860b;
    box-shadow: inset 0 -3px 5px rgba(0,0,0,.1), inset 0 2px 4px rgba(255,255,255,.25), 0 3px 6px rgba(120,80,0,.15);
}
.rts-box::before { /* fita adesiva */
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 10px; margin-left: -5px;
    background: linear-gradient(180deg, rgba(255,240,200,.45), rgba(255,240,200,.2));
}
.rts-box-pos { position: absolute; top: 3px; left: 5px; font-size: 9px; font-weight: 800; color: rgba(255,255,255,.75); }
.rts-box-selb { position: relative; font-size: 14px; font-weight: 900; color: #1a1a2e; letter-spacing: .5px; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.rts-box-model { position: relative; font-size: 8.5px; font-weight: 700; color: rgba(0,0,0,.45); text-transform: uppercase; margin-top: 2px; }
.rts-slot.busy { cursor: not-allowed; }
.rts-slot.busy .rts-box { filter: saturate(.35) brightness(1.08); opacity: .8; }

/* Vaga livre: contorno tracejado; no hover mostra a "sombra" da sua caixa */
.rts-slot.free { cursor: pointer; }
.rts-slot.free:not(.sel)::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; border-radius: 6px;
    border: 1.5px dashed #5eead4; background: rgba(240,253,250,.8); transition: all .2s ease;
}
.rts-free-pos { position: absolute; left: 6px; bottom: 34px; z-index: 1; font-size: 9.5px; font-weight: 800; color: #14b8a6; }
.rts-free-plus { position: absolute; left: 50%; bottom: 13px; margin-left: -12px; z-index: 1; font-size: 24px !important; color: #2dd4bf; transition: all .2s ease; }
.rts-origin-tag {
    position: absolute; top: -2px; right: -4px; z-index: 2; padding: 1px 6px; border-radius: 999px;
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #fff; background: #0d9488;
    box-shadow: 0 2px 6px rgba(13,148,136,.35);
}
.rts-slot.free .rts-box.ghost { opacity: 0; transform: translateY(-10px) scale(.94); transition: all .22s ease; pointer-events: none; }
.rts-slot.free:not(.sel):hover::before { border-color: #0d9488; background: rgba(204,251,241,.6); }
.rts-slot.free:not(.sel):hover .rts-free-plus,
.rts-slot.free:not(.sel):hover .rts-free-pos { opacity: 0; }
.rts-slot.free:not(.sel):hover .rts-box.ghost { opacity: .55; transform: none; }

/* Sua caixa na vaga escolhida (cai e quica) */
.rts-slot.sel .rts-box.mine {
    background: linear-gradient(145deg, #e8b94f, #c4943a); border-color: #0f766e;
    box-shadow: 0 0 0 2px #14b8a6, 0 10px 20px rgba(13,148,136,.3), inset 0 2px 4px rgba(255,255,255,.3);
}
.rts-box.mine.drop { animation: rtsDrop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes rtsDrop {
    0% { transform: translateY(-38px) scale(.9); opacity: 0; }
    55% { transform: translateY(3px) scale(1.02, .96); opacity: 1; }
    75% { transform: translateY(-2px); }
    100% { transform: none; }
}
.rts-pin {
    position: absolute; top: -12px; left: 50%; margin-left: -12px; z-index: 3; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 4px 10px rgba(13,148,136,.4); animation: rtsPin 1.6s ease-in-out infinite;
}
.rts-pin .material-icons { font-size: 15px; }
@keyframes rtsPin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

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

/* Rodapé: trajeto da caixa + ações */
.rts-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 22px; border-top: 1px solid #eef0f6; background: #fafbfe;
}
.rts-summary { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-muted); }
.rts-summary > .material-icons { font-size: 18px; }
.rts-route, .rts-done { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #0f766e; }
.rts-done { justify-content: center; font-size: 14px; color: var(--text-main); }
.rts-route-box {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 7px; border-radius: 8px;
    font-weight: 900; letter-spacing: .4px; color: #1a1a2e; background: linear-gradient(145deg, #e8b94f, #c4943a);
    border: 1px solid #b8860b; box-shadow: 0 2px 6px rgba(120,80,0,.18);
}
.rts-route-box .material-icons { font-size: 15px; color: rgba(0,0,0,.45); }
.rts-route-arrow { font-size: 18px !important; color: #14b8a6; animation: rtsNudge 1.4s ease-in-out infinite; }
@keyframes rtsNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.rts-route-dest { color: var(--text-main); }
.rts-route-dest b { color: #0f766e; }
.rts-actions { display: flex; gap: 10px; margin-left: auto; }
.rts-confirm {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 0; border-radius: 12px;
    font: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #0f766e, #14b8a6); box-shadow: 0 6px 16px rgba(13,148,136,.3); transition: all .2s ease;
}
.rts-confirm .material-icons { font-size: 17px; }
.rts-confirm:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(13,148,136,.42); }
.rts-confirm:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.rts-spin { animation: cmdSpin .9s linear infinite; }

@media (max-width: 600px) {
    .rts-head { padding: 16px; }
    .rts-body { padding: 14px 16px 6px; }
    .rts-journey { flex-direction: column; align-items: stretch; gap: 10px; }
    .rts-j-path { justify-content: center; }
    .rts-foot { padding: 12px 16px; }
    .rts-actions { width: 100%; }
    .rts-actions > button { flex: 1; justify-content: center; }
    .rts-shelf { min-width: 0; flex: 1 1 150px; }
}

/* ====================== COMODATO ====================== */
.postagens-wrap { display: flex; flex-direction: column; gap: 18px; }
.comodato-modal { max-width: 680px; }

/* rodapé de modal (usado pelo modal de comodato) */
.np-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 22px; border-top: 1px solid #eef0f6;
    background: #fafbfe; border-radius: 0 0 var(--radius) var(--radius);
    position: sticky; bottom: 0;
}
.np-cancel-btn {
    background: #fff; border: 1px solid #e2e5ee; color: #475069;
    padding: 10px 18px; border-radius: 12px; font-weight: 600; font-size: 13px;
    cursor: pointer; transition: all .2s;
}
.np-cancel-btn:hover { background: #f1f3f9; }
.np-save-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none; color: #fff;
    padding: 10px 20px; border-radius: 12px; font-weight: 700; font-size: 13px;
    cursor: pointer; transition: all .2s; box-shadow: 0 6px 16px rgba(99,102,241,.28);
    display: inline-flex; align-items: center; gap: 6px;
}
.np-save-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(99,102,241,.36); }
.np-save-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* alternador de modo (por SELB / outro modelo) */
.cmd-modo-toggle {
    display: flex; gap: 6px; background: #f1f3f9; padding: 5px;
    border-radius: 14px; margin-bottom: 18px;
}
.cmd-modo-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent; border: none; color: #64708c; cursor: pointer;
    padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: 13px;
    transition: all .2s;
}
.cmd-modo-btn .material-icons { font-size: 18px; }
.cmd-modo-btn.active {
    background: #fff; color: #4f46e5;
    box-shadow: 0 2px 8px rgba(79,70,229,.14);
}

.cmd-bloco {
    background: #f8f9fd; border: 1px solid #eef0f6; border-radius: 14px;
    padding: 16px; margin-bottom: 16px;
}

/* Qual documento: Termo de envio × Laudo técnico */
.cmd-doc-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.cmd-doc-btn {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
    background: #fff; border: 1.5px solid #e6e9f2; color: #475069; font: inherit; transition: border-color .2s, box-shadow .2s, background .2s;
}
.cmd-doc-btn:hover { border-color: #c7d2fe; }
.cmd-doc-btn > .material-icons {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center;
    font-size: 20px; color: #64708c; background: #f1f3f9; transition: background .2s, color .2s;
}
.cmd-doc-btn b { display: block; font-size: 13.5px; font-weight: 700; color: #1a1f36; }
.cmd-doc-btn small { display: block; margin-top: 1px; font-size: 11.5px; color: #8a95ad; }
.cmd-doc-btn.active { border-color: #6366f1; background: #f5f6ff; box-shadow: 0 6px 16px rgba(99,102,241,.14); }
.cmd-doc-btn.active > .material-icons { color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); }

/* Laudo: áreas de texto com contador de linhas do documento */
.ld-area { margin-bottom: 12px; }
.ld-area label { display: flex; align-items: baseline; gap: 6px; }
.ld-count { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: #94a3b8; }
.ld-count.over { color: #dc2626; }
.ld-area textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; padding: 10px 12px; border-radius: 12px;
    border: 1.5px solid #e6e9f2; background: #fff; font: inherit; font-size: 13.5px; line-height: 1.5; color: #1a1f36; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.ld-area textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(234,88,12,.12); }
.ld-area textarea.ld-over { border-color: #fca5a5; background: #fff7f7; }
.pi-tag.pi-laudo { color: #4338ca; background: #eef2ff; }

@media (max-width: 560px) {
    .cmd-doc-toggle { grid-template-columns: 1fr; }
}
.cmd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmd-field { display: flex; flex-direction: column; gap: 6px; }
.cmd-field-full { grid-column: 1 / -1; }
.cmd-field label { font-size: 12px; font-weight: 600; color: #475069; }
.cmd-field select {
    border: none; background: transparent; width: 100%; font-size: 14px;
    color: #1a1f36; outline: none; cursor: pointer;
}
.cmd-spin { font-size: 16px !important; color: #6366f1; animation: cmdSpin 0.9s linear infinite; }
@keyframes cmdSpin { to { transform: rotate(360deg); } }
.cmd-hint { font-size: 11.5px; color: #7a869e; margin-top: 6px; }
.cmd-hint.cmd-hint-err { color: #dc2626; }
.cmd-section-title {
    font-size: 12px; font-weight: 700; color: #8a95ad; text-transform: uppercase;
    letter-spacing: .6px; margin: 6px 0 12px;
}

@media (max-width: 560px) {
    .cmd-grid { grid-template-columns: 1fr; }
}

/* Mobile e Animações */
.bottom-nav { display: none; }
.mobile-header { display: none; }
.mobile-logout-btn {
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04));
    border: 1px solid rgba(239,68,68,0.15); border-radius: 10px;
    color: #ef4444; cursor: pointer; padding: 7px 12px;
    display: flex; align-items: center; gap: 4px; transition: all 0.2s;
    font-size: 11px; font-weight: 600;
}
.mobile-logout-btn:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); transform: scale(1.02); }

@media (max-width: 768px) {
    .app-container { flex-direction: column; }
    aside { display: none; }
    .mobile-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 10px 16px;
        background: linear-gradient(135deg, #f8f7ff, #eef0ff, #f5f3ff);
        border-bottom: 1px solid rgba(79,70,229,0.1);
        position: sticky; top: 0; z-index: 50;
        box-shadow: 0 2px 16px rgba(79,70,229,0.06);
    }
    main { padding: 15px; padding-top: 0; padding-bottom: 80px; }
    h2 { font-size: 24px; }
    .dash-title { font-size: 24px; }
    .flex-between { flex-direction: column; align-items: stretch; gap: 15px; }
    .flex-gap { flex-wrap: wrap; }
    .kpi-grid-modern { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-number { font-size: 24px; }
    .kpi-icon-modern { width: 38px; height: 38px; }
    .kpi-icon-modern .material-icons { font-size: 20px; }
    .charts-grid-modern { grid-template-columns: 1fr; }
    .charts-grid { grid-template-columns: 1fr; }
    .shelves-modern { grid-template-columns: 1fr; }
    .stock-header { flex-direction: column; }
    .stock-stats-bar { gap: 16px; flex-wrap: wrap; }
    .stock-filters-modern { flex-direction: column; }
    .insights-grid { grid-template-columns: 1fr; }
    input, select, .btn { width: 100%; }
    #search-stock { width: 100% !important; }
    .bottom-nav {
        display: block !important; position: fixed; bottom: 0; left: 0; right: 0;
        background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
        z-index: 999;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
        border-top: 1px solid rgba(255,255,255,0.06);
        backdrop-filter: blur(12px);
        overflow: hidden;
    }
    /* Trilho rolável horizontalmente — arrasta pro lado pra ver todas as abas */
    .bottom-nav-track {
        display: flex; align-items: stretch;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding: 0 12px;
        padding: 6px 10px 10px; gap: 2px;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .bottom-nav-track::-webkit-scrollbar { display: none; }
    /* Fades nas bordas indicando que dá pra rolar */
    .bottom-nav::before, .bottom-nav::after {
        content: ''; position: absolute; top: 0; bottom: 0; width: 26px;
        z-index: 2; pointer-events: none; transition: opacity 0.2s;
    }
    .bottom-nav::before { left: 0; background: linear-gradient(90deg, #1a1a2e, rgba(26,26,46,0)); }
    .bottom-nav::after { right: 0; background: linear-gradient(270deg, #16162a, rgba(22,22,42,0)); }
    .bottom-nav.at-start::before { opacity: 0; }
    .bottom-nav.at-end::after { opacity: 0; }
    .bottom-nav button {
        flex: 0 0 auto; min-width: 64px; scroll-snap-align: center;
        background: none; border: none; color: #4a4a6a;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        font-size: 9px; gap: 3px; font-weight: 600; padding: 5px 8px;
        border-radius: 12px; transition: all 0.25s; position: relative;
        letter-spacing: 0.2px; white-space: nowrap;
    }
    .bottom-nav button:hover { color: #8b8baf; }
    .bottom-nav button.active {
        color: #a78bfa;
        background: linear-gradient(180deg, rgba(139,92,246,0.14), rgba(99,102,241,0.06));
    }
    .bottom-nav button.active::before {
        content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
        width: 20px; height: 3px; border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, #8b5cf6, #6366f1);
        box-shadow: 0 2px 8px rgba(139,92,246,0.4);
    }
    .bottom-nav button.active span.material-icons {
        filter: drop-shadow(0 0 6px rgba(139,92,246,0.4));
        transform: translateY(-1px) scale(1.05);
    }
    .bottom-nav button span.material-icons { font-size: 21px; transition: all 0.25s; }
    .bottom-nav button span:last-child { font-size: 9px; }
}

@media (max-width: 480px) {
    .kpi-grid-modern { grid-template-columns: 1fr 1fr; }
    .kpi-card-modern { padding: 14px; }
    .kpi-label { font-size: 10px; }
    .kpi-sparkline { display: none; }
}

/* Sugestões e Avisos */
.suggestions-list {
    max-height: 150px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: white; margin-top: -10px; margin-bottom: 10px; display: none; box-shadow: var(--shadow-md);
}
.suggestions-list.active { display: block; }
.suggestion-item { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid #f3f4f6; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.15s; }
.suggestion-item:hover { background-color: #eff6ff; color: var(--blue); }
.suggestion-item:last-child { border-bottom: none; }
.warning-msg { font-size: 12px; color: #c2410c; background-color: #fff7ed; padding: 8px 12px; border-radius: 8px; margin-top: -5px; margin-bottom: 10px; display: none; border: 1px solid #fed7aa; }

/* Animações e Loaders */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(37,99,235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235, 0); } }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#loading-screen { position: fixed; inset: 0; background: white; z-index: 2000; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.spinner { width: 40px; height: 40px; border: 4px solid #e5e5e5; border-top: 4px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ========================================================= */
/* CSS DO MODO LAYOUT VS MODO NORMAL                         */
/* ========================================================= */

/* Container Principal - Modo Normal é o .shelves-modern grid */
#shelves-container { transition: all 0.3s ease; }

/* Modo Layout: Grid dinâmico (controlado pelo slider) */
body.layout-active #shelves-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(var(--shelf-min-width), 1fr)) !important;
    gap: var(--shelf-gap) !important;
}

/* Cards no modo layout */
body.layout-active #shelves-container .shelf-card-modern,
body.layout-active #shelves-container .card,
body.layout-active .shelf-group {
    width: 100% !important;
    padding: var(--card-padding) !important;
    flex: none;
}

/* Estilo do Grupo (Modo Layout) */
.shelf-group {
    border: 2px dashed #cbd5e1; border-radius: var(--radius); padding: 16px; margin-bottom: 16px; background: #f8fafc; width: 100%;
}
.shelf-group-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--text-main); text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.shelf-group-tabs { display: flex; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; }
.shelf-group-tab { padding: 5px 14px; border: 1px solid #e5e7eb; border-radius: 20px; font-size: 11px; cursor: pointer; background: #fff; color: #64748b; transition: all 0.2s; font-weight: 500; }
.shelf-group-tab:hover { background: #f1f5f9; }
.shelf-group-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600; box-shadow: 0 2px 8px rgba(37,99,235,0.25); }
.sortable-ghost { opacity: 0.4; background: #e0f2fe; border: 2px dashed var(--blue); }

/* Modo Layout: Centraliza e ajusta gap */
body.layout-active .shelf-grid {
    justify-content: center;
    gap: 2px !important;
}

/* Modo Layout: Tamanho fixo controlado pelo Slider */
body.layout-active .slot-btn {
    width: var(--shelf-slot-size) !important;
    height: calc(var(--shelf-slot-size) * 0.75) !important;
    aspect-ratio: unset !important;
    min-width: auto !important;
    border-width: 1px !important;
    border-radius: 6px;
}

/* Feedback visual ao arrastar ITEM */
.slot-btn.dragging {
    opacity: 0.4;
    border: 2px dashed #333 !important;
    transform: scale(0.9);
}

/* Feedback visual ao passar por cima de um slot (Drop Target) */
.slot-btn.drag-over {
    background: linear-gradient(145deg, #dbeafe, #bfdbfe) !important;
    border: 2px dashed var(--blue) !important;
    transform: scale(1.08);
}

/* Fontes no Modo Layout */
body.layout-active .slot-btn .model { font-size: var(--shelf-font-size) !important; }
body.layout-active .slot-btn .selb { font-size: calc(var(--shelf-font-size) - 2px) !important; }
body.layout-active .shelf-header-modern h3,
body.layout-active .rack-header h3 { font-size: calc(var(--shelf-font-size) + 4px) !important; }

/* Transição de Layout */
.layout-transition { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 1; transform: translateY(0); }
.layout-transition.fade-out { opacity: 0; transform: translateY(10px); }

/* --- ESTILOS DO MODO "MOVER ITENS" --- */
body.move-active .slot-btn,
body.move-active .rack-slot { cursor: grab !important; }
body.move-active .slot-btn.occupied,
body.move-active .rack-slot.occupied { box-shadow: 0 4px 8px rgba(0,0,0,0.12); }
body.move-active .slot-btn:active,
body.move-active .rack-slot:active { cursor: grabbing !important; }
body.move-active .edit-slot-btn,
body.move-active .rack-edit-icon { display: none !important; }
.slot-btn.dragging { opacity: 0.5; background: #fcd34d !important; transform: scale(0.9); border: 2px dashed #000 !important; }
.slot-btn.drag-over { background-color: #bfdbfe !important; border: 2px solid var(--blue) !important; transform: scale(1.1); z-index: 10; }

/* Slider */
.zoom-control-box { display: flex; align-items: center; gap: 8px; background: white; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); animation: fadeIn 0.3s; }
.zoom-control-box.hidden { display: none !important; }
.zoom-control-box.disabled { opacity: 0.5; pointer-events: none; background: #f3f4f6; }
#zoom-slider { width: 100px; height: 4px; border: none; padding: 0; margin: 0; background: #e5e7eb; border-radius: 2px; appearance: none; cursor: pointer; }
#zoom-slider::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); cursor: pointer; transition: transform 0.1s; }
#zoom-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Botão Mover Itens ativo */
#btn-move-items.active { background-color: var(--warning); color: white; border-color: var(--warning); animation: pulse-orange 2s infinite; }
@keyframes pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.7); } 70% { box-shadow: 0 0 0 6px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }

body.layout-active #stock-filters { opacity: 0.5; pointer-events: none; }

/* Drag rules */
body.move-active .slot-btn { cursor: grab !important; border: 1px dashed #94a3b8 !important; }
body.move-active .slot-btn.occupied { border: 1px solid #fed7aa !important; }
body.move-active .slot-btn:active { cursor: grabbing !important; }

/* Scrollbar custom */
main::-webkit-scrollbar { width: 6px; }
main::-webkit-scrollbar-track { background: transparent; }
main::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
main::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.activity-feed::-webkit-scrollbar { width: 4px; }
.activity-feed::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

/* ============================================ */
/*    SHIPMENTS - Search & Filters                */
/* ============================================ */
/* Central de Relatórios — abas + Relatório de envios */
.rr-abas { display: inline-flex; gap: 4px; margin-bottom: 18px; padding: 5px; border-radius: 14px; background: #eef1f6; }
.rr-abas button {
    position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; border-radius: 10px;
    background: transparent; color: #64748b; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s;
}
.rr-abas button .material-icons { font-size: 18px; }
.rr-abas button.active { background: #fff; color: #1d4ed8; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.rr-aba-dot { width: 8px; height: 8px; border-radius: 50%; background: #ea580c; box-shadow: 0 0 0 3px rgba(234,88,12,.18); }
.rr-aba-dot.hidden { display: none; }

.rr-filtros { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; padding: 16px 18px !important; }
.rr-filtro { display: flex; flex-direction: column; gap: 8px; }
.rr-filtro > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; }
.rr-filtro-modelo { min-width: 210px; }
.rr-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f5f9; }
.rr-seg button {
    padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; color: #475569;
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.rr-seg button.active { background: #fff; color: #ea580c; box-shadow: 0 2px 6px rgba(15,23,42,.08); }
.rr-custom { display: none; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #64748b; }
.rr-custom.open { display: flex; }
.rr-custom input {
    width: auto; margin: 0; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
    font: inherit; font-size: 13px; color: #0f172a;
}
.rr-select { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.rr-select .material-icons { font-size: 18px; color: #94a3b8; }
.rr-select select { flex: 1; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: #0f172a; outline: none; cursor: pointer; }

.rr-card { padding: 0 !important; overflow: hidden; }
.rr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid #eef1f6; background: linear-gradient(135deg, #fff7ed, #fff); }
.rr-card-head b { display: block; font-size: 15px; font-weight: 800; color: #0f172a; }
.rr-card-head small { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
.rr-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.rr-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff;
    color: #334155; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.rr-btn .material-icons { font-size: 17px; }
.rr-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.rr-btn:disabled { opacity: .6; cursor: default; }
.rr-btn-zap { border-color: #bbf7d0; color: #15803d; background: #f0fdf4; }
.rr-btn-xlsx { border: 0; color: #fff; background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 4px 12px rgba(22,163,74,.25); }
.rr-spin { animation: spin .9s linear infinite; }

#rr-resultado { padding: 16px 18px 18px; }
.rr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.rr-kpi { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 14px; background: #f8fafc; border: 1px solid #eef1f6; }
.rr-kpi > .material-icons {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center;
    font-size: 20px; color: #ea580c; background: #fff7ed;
}
.rr-kpi small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; }
.rr-kpi b { display: block; font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1.2; }
.rr-kpi em { display: block; font-style: normal; font-size: 11.5px; color: #64748b; }

.rr-dist { margin-bottom: 16px; }
.rr-dist-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: #f1f5f9; gap: 2px; }
.rr-dist-bar i { display: block; min-width: 3px; }
.rr-dist-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; font-size: 12.5px; color: #475569; }
.rr-dist-leg span { display: inline-flex; align-items: center; gap: 6px; }
.rr-dist-leg i { width: 9px; height: 9px; border-radius: 3px; }
.rr-dist-leg b { color: #0f172a; }
.rr-dist-leg em { font-style: normal; color: #94a3b8; }

.rr-tabela-wrap { overflow-x: auto; border: 1px solid #eef1f6; border-radius: 14px; }
.rr-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rr-tabela th {
    position: sticky; top: 0; padding: 10px 14px; text-align: left; white-space: nowrap; background: #f8fafc;
    font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #64748b; border-bottom: 1px solid #eef1f6;
}
.rr-tabela td { padding: 9px 14px; border-bottom: 1px solid #f1f5f9; color: #0f172a; white-space: nowrap; }
.rr-tabela tbody tr:hover td { background: #fffaf5; }
.rr-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.rr-tabela tr.zero td { color: #94a3b8; }
.rr-z { color: #cbd5e1; }
.rr-tabela .rr-col-total { min-width: 150px; }
.rr-tot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.rr-tot b { min-width: 28px; }
.rr-cel-bar { flex: 1; max-width: 120px; height: 6px; border-radius: 99px; background: #f1f5f9; overflow: hidden; }
.rr-cel-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fdba74, #ea580c); }
.rr-tabela tfoot td { border-bottom: 0; background: #fff7ed; font-weight: 800; color: #7c2d12; border-top: 2px solid #fdba74; }

.rr-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 10px; text-align: center; color: #64748b; }
.rr-vazio .material-icons { font-size: 40px; color: #cbd5e1; }
.rr-vazio b { color: #334155; }
.rr-vazio small { font-size: 12px; }

@media (max-width: 760px) {
    .rr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rr-kpi { padding: 10px; gap: 8px; }
    .rr-kpi > .material-icons { width: 32px; height: 32px; font-size: 17px; }
    .rr-kpi b { font-size: 16px; }
    .rr-abas { display: flex; }
    .rr-abas button { flex: 1; justify-content: center; padding: 9px 8px; font-size: 12.5px; }
    .rr-acoes { width: 100%; }
    .rr-btn { flex: 1; justify-content: center; }
}

/* Relatório mensal: mês do relatório (atual, passado ou anteriores) */
.rp-mes-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; padding: 14px 18px !important; }
.rp-mes-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.rp-mes-ico {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
    font-size: 22px !important; color: #fff; background: linear-gradient(135deg, #2563eb, #3b82f6); box-shadow: 0 6px 14px rgba(37,99,235,.25);
}
.rp-mes-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; }
.rp-mes-nome { font-size: 18px; font-weight: 800; color: #0f172a; letter-spacing: -.2px; }
.rp-mes-sub { font-size: 12px; color: #64748b; }
.rp-mes-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.rp-mes-status .material-icons { font-size: 15px; }
.rp-mes-status.ok { color: #047857; background: #ecfdf5; }
.rp-mes-status.pend { color: #b45309; background: #fffbeb; }
.rp-mes-nav { display: flex; gap: 6px; }
.rp-mes-nav button {
    width: 38px; height: 38px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; color: #334155; cursor: pointer;
    display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s;
}
.rp-mes-nav button:hover:not(:disabled) { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.rp-mes-nav button:disabled { opacity: .35; cursor: default; }
.rp-mes-alerta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px; border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 1px solid #fdba74; color: #7c2d12; font-size: 13.5px;
}
.rp-mes-alerta > .material-icons { color: #ea580c; }
.rp-mes-alerta button {
    margin-left: auto; padding: 8px 14px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, #f97316, #ea580c); box-shadow: 0 4px 12px rgba(234,88,12,.3);
}
.rp-mes-alerta.hidden { display: none; }

/* Card do Relatório Semestral */
.semester-report-card {
    background: linear-gradient(135deg, #faf9ff 0%, #f0efff 100%);
    border: 1px solid #c7d2fe !important; border-left: 4px solid #7c3aed !important;
    position: relative; overflow: hidden;
}
.semester-report-card::before {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,0.1), transparent 70%);
    pointer-events: none;
}
.semester-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.semester-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(124,58,237,0.25);
}
.semester-icon .material-icons { color: white; font-size: 26px; }
.semester-status-badge {
    background: white; color: #6366f1; padding: 4px 10px;
    border-radius: 99px; font-size: 11px; font-weight: 700;
    border: 1px solid #c7d2fe; text-transform: uppercase; letter-spacing: 0.4px;
}
.semester-status-badge.due { background: linear-gradient(135deg, #10b981, #059669); color: white; border-color: transparent; }
.semester-status-badge.locked { background: #fef3c7; color: #92400e; border-color: #fde68a; }

.semester-info-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px;
    position: relative; z-index: 1;
}
.semester-info-item {
    background: white; border-radius: 10px; padding: 10px 12px;
    border: 1px solid #eef0ff;
}
.semester-info-label { font-size: 10px; color: #94a3b8; text-transform: uppercase; font-weight: 700; letter-spacing: 0.3px; }
.semester-info-value { font-size: 13px; font-weight: 700; color: #1e293b; margin-top: 2px; }

.semester-actions { display: flex; gap: 8px; position: relative; z-index: 1; }
.semester-send-btn {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important; color: white !important;
    border: none !important; box-shadow: 0 4px 12px rgba(124,58,237,0.3); border-radius: var(--radius-sm) !important; font-size: 13px !important;
}
.semester-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124,58,237,0.4); }

.semester-hint {
    margin-top: 14px; padding: 8px 12px; background: rgba(124,58,237,0.05);
    border-radius: 8px; font-size: 11.5px; color: #5b21b6;
    display: flex; align-items: flex-start; gap: 6px; line-height: 1.5; position: relative; z-index: 1;
}
.semester-hint .material-icons { font-size: 14px; color: #7c3aed; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 600px) {
    .semester-info-row { grid-template-columns: 1fr; }
    .semester-actions { flex-direction: column; }
    .semester-actions .btn { width: 100%; justify-content: center; }
}

/* Contadores de envios */
.ship-counter-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px;
}
.ship-counter-card {
    background: white; border-radius: 14px; padding: 14px; cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    border: 1px solid #eef0ff; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.2s; position: relative; overflow: hidden;
}
.ship-counter-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--primary); opacity: 0; transition: opacity 0.2s;
}
.ship-counter-card:hover {
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99,102,241,0.12);
    border-color: #c7d2fe;
}
.ship-counter-card.active::before { opacity: 1; background: linear-gradient(180deg, #6366f1, #8b5cf6); }
.ship-counter-card.active { background: linear-gradient(135deg, #fafbff, #f0efff); border-color: #c7d2fe; }
.ship-counter-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; color: white;
    flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.ship-counter-icon .material-icons { font-size: 20px; }
.ship-counter-body { flex: 1; min-width: 0; }
.ship-counter-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }
.ship-counter-value { font-size: 24px; font-weight: 800; color: #1e293b; line-height: 1.1; margin-top: 2px; letter-spacing: -0.5px; }

@media (max-width: 1024px) {
    .ship-counter-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .ship-counter-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ship-counter-card { padding: 10px; gap: 8px; }
    .ship-counter-icon { width: 32px; height: 32px; }
    .ship-counter-icon .material-icons { font-size: 16px; }
    .ship-counter-value { font-size: 18px; }
    .ship-counter-label { font-size: 9.5px; }
}

.ship-search-card { padding: 16px 18px 12px !important; }
.ship-search-row {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.ship-search-input-wrap {
    flex: 1; min-width: 220px; position: relative;
    display: flex; align-items: center;
    background: #f8fafc; border: 1.5px solid var(--border);
    border-radius: 12px; padding: 0 14px; transition: all 0.25s;
}
.ship-search-input-wrap:focus-within {
    border-color: var(--purple); background: white;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
}
.ship-search-icon { color: #94a3b8; font-size: 20px; margin-right: 8px; transition: color 0.2s; }
.ship-search-input-wrap:focus-within .ship-search-icon { color: var(--purple); }
.ship-search-input-wrap input {
    flex: 1; border: none !important; outline: none !important;
    background: transparent !important; padding: 10px 0 !important;
    font-size: 13px; color: var(--text-main); width: auto !important;
    box-shadow: none !important; margin: 0 !important;
}
.ship-status-wrap {
    min-width: 170px;
}
.ship-status-wrap select {
    width: 100%; padding: 10px 14px; border-radius: 12px;
    border: 1.5px solid var(--border); background: #f8fafc;
    font-size: 13px; color: var(--text-main); cursor: pointer;
    transition: all 0.25s; appearance: auto; margin: 0;
}
.ship-status-wrap select:focus {
    border-color: var(--purple); background: white;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.08); outline: none;
}

.ship-filter-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
    padding: 10px 12px; border-radius: 10px;
    background: linear-gradient(135deg, #f8f7ff, #f0efff);
    border: 1px solid rgba(139,92,246,0.08);
    align-items: center;
}
.ship-filter-label {
    font-size: 11px; font-weight: 700; color: #6366f1;
    margin-right: 4px; display: flex; align-items: center; gap: 4px;
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px;
}
.ship-filter-label .material-icons { font-size: 15px; }
.ship-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 99px;
    border: 1px solid rgba(139,92,246,0.12); background: white;
    color: #64748b; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ship-chip .material-icons { font-size: 13px; color: #94a3b8; transition: color 0.2s; }
.ship-chip:hover { border-color: #c4b5fd; color: var(--purple); background: #f5f3ff; transform: translateY(-1px); }
.ship-chip:hover .material-icons { color: var(--purple); }
.ship-chip.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white;
    border-color: transparent; box-shadow: 0 2px 8px rgba(139,92,246,0.3);
    transform: translateY(-1px);
}
.ship-chip.active .material-icons { color: white; }

@media (max-width: 768px) {
    .ship-search-row { flex-direction: column; gap: 8px; }
    .ship-search-input-wrap { min-width: 100%; }
    .ship-status-wrap { min-width: 100%; width: 100%; }
    .ship-filter-chips { gap: 5px; margin-top: 8px; padding: 8px 10px; }
    .ship-filter-label { font-size: 10px; margin-right: 2px; }
    .ship-chip { padding: 4px 10px; font-size: 10px; }
    .ship-chip .material-icons { font-size: 12px; }
}

.ship-search-count {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fed7aa; color: #9a3412;
    padding: 6px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 700;
    margin-top: 10px;
    animation: rcpFadeIn 0.2s ease-out;
}
.ship-search-count::before {
    content: 'search'; font-family: 'Material Icons';
    font-size: 14px;
}
.ship-search-count b { font-size: 13px; color: #c2410c; }

/* ============================================ */
/*    CONVERSAS — visual fiel ao WhatsApp Web     */
/* ============================================ */
#section-conversations {
    position: absolute; inset: 0; padding: 10px; z-index: 10; background: var(--bg-light);
    --wa-green: #00a884; --wa-green-dark: #008069; --wa-unread: #25d366; --wa-text: #111b21; --wa-muted: #667781;
    --wa-icon: #54656f; --wa-line: #e9edef; --wa-panel: #f0f2f5; --wa-sent: #d9fdd3; --wa-chat: #efeae2;
    --wa-shadow: 0 1px .5px rgba(11,20,26,.13);
}
.wpp-wrapper {
    display: flex; width: 100%; height: 100%; overflow: hidden; background: #fff;
    border-radius: 14px; box-shadow: 0 6px 30px rgba(11,20,26,.12), 0 1px 3px rgba(11,20,26,.08);
    font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--wa-text);
}
@keyframes pulse-red { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes pulse-yellow { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- Lista (esquerda) ---- */
.wpp-left {
    width: 32%; min-width: 300px; max-width: 440px; height: 100%; flex-shrink: 0; overflow: hidden;
    display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--wa-line);
}
.wpp-left-header { flex-shrink: 0; background: #fff; }
.wpp-left-header-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 8px 20px; }
.wpp-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wpp-left-header-top h3 { margin: 0; font-size: 22px; font-weight: 700; color: var(--wa-text); letter-spacing: -.3px; }
.wpp-header-icons { display: flex; align-items: center; gap: 2px; }

/* Selo de conexão (substitui os dois indicadores antigos) */
.wpp-conn {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--wa-line); background: #fff; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--wa-muted);
    transition: background .15s;
}
.wpp-conn:hover { background: var(--wa-panel); }
.wpp-conn[data-state="online"] { color: var(--wa-green-dark); border-color: #c8ecd9; background: #f2fbf6; }
.wpp-conn[data-state="offline"] { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: background .3s; }
.status-dot.online { background: var(--wa-unread); box-shadow: 0 0 0 3px rgba(37,211,102,.18); }
.status-dot.offline { background: #ef4444; animation: pulse-red 1.5s infinite; }
.status-dot.checking { background: #f59e0b; animation: pulse-yellow 1s infinite; }

.wpp-icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--wa-icon); transition: background .15s;
}
.wpp-icon-btn .material-icons { font-size: 23px; }
.wpp-icon-btn:hover { background: rgba(11,20,26,.06); }

/* Menu ⋮ */
.wpp-menu-wrap, .wpp-emoji-wrap { position: relative; }
.wpp-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; min-width: 236px; padding: 8px;
    background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(11,20,26,.18), 0 2px 6px rgba(11,20,26,.08);
    transform-origin: top right; animation: wppPop .16s ease-out;
}
.wpp-menu[hidden] { display: none; }
@keyframes wppPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.wpp-menu button {
    width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 0; border-radius: 10px;
    background: none; cursor: pointer; font: inherit; font-size: 14.5px; color: #3b4a54; text-align: left;
}
.wpp-menu button .material-icons { font-size: 20px; color: var(--wa-icon); }
.wpp-menu button:hover { background: var(--wa-panel); }
.wpp-menu button.danger, .wpp-menu button.danger .material-icons { color: #e11d48; }
.wpp-menu-sep { height: 1px; margin: 6px 4px; background: var(--wa-line); }

/* Busca + filtros */
.wpp-search-bar {
    display: flex; align-items: center; gap: 12px; margin: 2px 12px 8px; padding: 0 14px; height: 38px;
    background: var(--wa-panel); border-radius: 10px; border: 2px solid transparent; transition: all .15s;
}
.wpp-search-bar:focus-within { background: #fff; border-color: var(--wa-green); }
.wpp-search-bar .material-icons { font-size: 20px; color: var(--wa-icon); }
.wpp-search-bar input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; margin: 0; padding: 0; font: inherit; font-size: 14.5px; color: var(--wa-text); width: auto; }
.wpp-search-bar input::placeholder { color: var(--wa-muted); }
.wpp-chips { display: flex; gap: 8px; padding: 2px 14px 10px; }
.wpp-chip {
    padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px;
    background: var(--wa-panel); color: var(--wa-icon); transition: background .15s, color .15s;
}
.wpp-chip:hover { background: #e4e7ea; }
.wpp-chip.active { background: #d9fdd3; color: var(--wa-green-dark); font-weight: 600; }

.wpp-conv-list { flex: 1; height: 0; overflow-y: auto; }
.wpp-conv-list::-webkit-scrollbar { width: 6px; }
.wpp-conv-list::-webkit-scrollbar-thumb { background: rgba(11,20,26,.18); border-radius: 3px; }

.wpp-conv-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 0 16px 0 14px; height: 72px; cursor: pointer; transition: background .1s; }
.wpp-conv-item::after { content: ''; position: absolute; left: 78px; right: 0; bottom: 0; height: 1px; background: var(--wa-line); }
.wpp-conv-item:hover { background: #f5f6f6; }
.wpp-conv-item.active { background: var(--wa-panel); }
.wpp-avatar { width: 49px; height: 49px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.wpp-avatar svg { display: block; width: 100%; height: 100%; }
.wpp-avatar.wpp-avatar-sm { width: 40px; height: 40px; }
.wpp-conv-body { flex: 1; min-width: 0; }
.wpp-conv-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wpp-conv-name { font-size: 16.5px; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpp-conv-time { flex-shrink: 0; font-size: 12px; color: var(--wa-muted); }
.wpp-conv-row2 { display: flex; align-items: center; gap: 3px; margin-top: 2px; min-width: 0; font-size: 14px; color: var(--wa-muted); }
.wpp-conv-preview { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpp-conv-row2 .wpp-tick { flex-shrink: 0; }
.wpp-unread-badge {
    flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; background: var(--wa-unread); color: #fff; font-size: 12px; font-weight: 700;
}
.wpp-conv-item.unread .wpp-conv-time { color: #1daa61; font-weight: 600; }
.wpp-conv-item.unread .wpp-conv-preview { color: #3b4a54; }

.wpp-empty { display: flex; flex-direction: column; align-items: center; padding: 70px 30px; text-align: center; color: var(--wa-muted); }
.wpp-empty .material-icons { font-size: 52px; color: #c8ced2; }
.wpp-empty p { margin: 12px 0 4px; font-size: 15px; color: #3b4a54; }
.wpp-empty small { font-size: 13px; }

/* ---- Conversa (direita) ---- */
.wpp-right {
    position: relative; flex: 1; width: 0; height: 100%; overflow: hidden;
    display: flex; flex-direction: column; background: var(--wa-chat);
}
/* Papel de parede com desenhos discretos (caixas, caminhão, impressora, balões) */
.wpp-right::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .09;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 34l14-7 14 7v15l-14 7-14-7z M24 34l14 7 14-7 M38 41v15'/%3E%3Cpath d='M150 30h26v18h-26z M176 36h8l5 6v6h-13 M156 52a3 3 0 1 0 0.1 0 M181 52a3 3 0 1 0 0.1 0'/%3E%3Cpath d='M92 112h28v14H92z M98 112v-8h16v8 M98 126v8h16v-8'/%3E%3Cpath d='M190 120c0-8 7-13 16-13s16 5 16 13-7 13-16 13c-2 0-4 0-6-1l-7 4 2-6c-3-2-5-6-5-10z'/%3E%3Cpath d='M30 170a14 14 0 1 0 28 0 14 14 0 1 0-28 0 M44 162v8l6 4'/%3E%3Cpath d='M140 190l4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Cpath d='M96 214c4-6 10-6 14 0s10 6 14 0'/%3E%3Cpath d='M210 200v18 M201 209h18'/%3E%3C/svg%3E");
}
.wpp-chat-empty, .wpp-chat-active { position: relative; z-index: 1; }

/* Tela inicial (nenhuma conversa aberta) */
.wpp-chat-empty { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8f9fa; }
.wpp-right:has(.wpp-chat-empty:not(.hidden))::before { opacity: 0; }
.wpp-chat-empty-box { max-width: 460px; padding: 40px; text-align: center; }
.wpp-chat-empty-box h2 { margin: 26px 0 10px; font-size: 30px; font-weight: 300; color: #41525d; letter-spacing: -.3px; }
.wpp-chat-empty-box p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wa-muted); }
.wpp-empty-art { position: relative; width: 180px; height: 150px; margin: 0 auto; }
.wpp-empty-ring { position: absolute; inset: 10px 25px; border-radius: 50%; background: radial-gradient(circle, #d9fdd3 0%, #e9f7ee 55%, transparent 72%); }
.wpp-empty-logo {
    position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 24px;
    display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #25d366, #00a884);
    box-shadow: 0 14px 30px rgba(0,168,132,.35);
}
.wpp-empty-logo .material-icons { font-size: 40px; }
.wpp-empty-bubble {
    position: absolute; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff;
    box-shadow: 0 6px 16px rgba(11,20,26,.12); animation: wppFloat 3.6s ease-in-out infinite;
}
.wpp-empty-bubble .material-icons { font-size: 20px; }
.wpp-empty-bubble.b1 { left: 4px; top: 20px; color: #ea580c; }
.wpp-empty-bubble.b2 { right: 4px; bottom: 18px; color: #53bdeb; animation-delay: -1.8s; }
@keyframes wppFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.wpp-empty-foot { position: absolute; bottom: 30px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #8696a0; }
.wpp-empty-foot .material-icons { font-size: 15px; }

.wpp-chat-active { flex: 1; height: 0; display: flex; flex-direction: column; overflow: hidden; }
.wpp-chat-topbar {
    flex-shrink: 0; display: flex; align-items: center; gap: 13px; height: 60px; padding: 0 12px 0 16px;
    background: var(--wa-panel); border-left: 1px solid #d1d7db;
}
.wpp-back-btn { display: none; border: 0; background: none; padding: 6px; margin-right: -4px; border-radius: 50%; cursor: pointer; color: var(--wa-icon); }
.wpp-header-info { flex: 1; min-width: 0; cursor: default; }
.wpp-header-name { font-size: 16px; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpp-header-phone { font-size: 13px; color: var(--wa-muted); margin-top: 1px; }
.wpp-header-actions { display: flex; align-items: center; gap: 4px; }

/* Mensagens */
.wpp-chat-body {
    flex: 1; height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column;
    padding: 12px 7% 10px;
}
.wpp-chat-body::-webkit-scrollbar { width: 6px; }
.wpp-chat-body::-webkit-scrollbar-thumb { background: rgba(11,20,26,.2); border-radius: 3px; }

.wpp-date-pill { display: flex; justify-content: center; margin: 12px 0 10px; pointer-events: none; }
.wpp-date-pill span {
    padding: 5px 12px 6px; border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: var(--wa-shadow);
    font-size: 12.5px; color: #54656f; text-transform: uppercase;
}
.wpp-new-msgs-divider { display: flex; justify-content: center; margin: 12px -8% 10px; padding: 5px 0; background: rgba(255,255,255,.35); }
.wpp-new-msgs-divider span {
    padding: 5px 14px; border-radius: 8px; background: #fff; box-shadow: var(--wa-shadow);
    font-size: 12.5px; font-weight: 500; color: var(--wa-green-dark); text-transform: uppercase;
}
.wpp-system-pill {
    align-self: center; max-width: 85%; display: flex; align-items: flex-start; gap: 6px; margin: 10px 0;
    padding: 6px 12px; border-radius: 8px; background: #ffeecd; box-shadow: var(--wa-shadow);
    font-size: 12.5px; line-height: 1.45; color: #54656f; text-align: center;
}
.wpp-system-pill .material-icons { font-size: 14px; margin-top: 2px; }

/* Balões */
.wpp-msg {
    position: relative; max-width: 65%; margin-top: 2px; padding: 6px 7px 8px 9px; border-radius: 8px;
    box-shadow: var(--wa-shadow); font-size: 14.2px; line-height: 19px; color: var(--wa-text); word-wrap: break-word;
}
.wpp-msg.tail { margin-top: 10px; }
.wpp-msg.sent { align-self: flex-end; background: var(--wa-sent); }
.wpp-msg.received { align-self: flex-start; background: #fff; }
.wpp-msg.sent.tail { border-top-right-radius: 0; }
.wpp-msg.received.tail { border-top-left-radius: 0; }
.wpp-msg.tail::before { content: ''; position: absolute; top: 0; width: 8px; height: 13px; }
.wpp-msg.sent.tail::before { right: -8px; background: var(--wa-sent); clip-path: polygon(0 0, 100% 0, 0 100%); }
.wpp-msg.received.tail::before { left: -8px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wpp-msg-text { white-space: normal; }
.wpp-msg-text a { color: #027eb5; text-decoration: none; }
.wpp-msg-text a:hover { text-decoration: underline; }
/* espaço reservado no fim do texto para a hora (como no WhatsApp) */
.wpp-meta-spacer { display: inline-block; width: 48px; height: 1px; }
.wpp-meta-spacer.sent { width: 70px; }
.wpp-msg-meta { position: absolute; right: 7px; bottom: 3px; display: inline-flex; align-items: center; gap: 3px; }
.wpp-time { font-size: 11px; line-height: 15px; color: var(--wa-muted); }
.wpp-tick { font-size: 16px !important; color: #8696a0; }
.wpp-tick-read { color: #53bdeb; }
.wpp-tick-fail { color: #e11d48; font-size: 15px !important; cursor: help; }
.wpp-msg.media-only { padding: 3px; }
.wpp-msg.media-only .wpp-meta-spacer { display: none; }
.wpp-msg.media-only .wpp-msg-meta { right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 10px; background: rgba(11,20,26,.45); }
.wpp-msg.media-only .wpp-time, .wpp-msg.media-only .wpp-tick { color: #fff; }

/* Mensagem automática: etiqueta no topo do balão (no estilo do "Encaminhada" do WhatsApp) */
.wpp-auto-tag {
    display: flex; align-items: center; gap: 4px; margin: 0 0 3px -2px; padding: 1px 6px 1px 4px; border: 0; border-radius: 6px;
    background: rgba(11,20,26,.05); cursor: pointer; font: inherit; font-size: 12.5px; font-style: italic; color: #667781;
    transition: background .15s, color .15s;
}
.wpp-auto-tag:hover, .wpp-auto-tag:focus-visible { background: rgba(0,168,132,.14); color: #008069; outline: none; }
.wpp-auto-tag .material-icons { font-size: 15px; font-style: normal; }
.wpp-auto-tag .wpp-auto-i { font-size: 14px; color: #00a884; margin-left: 1px; }

/* Registro do sistema sem mensagem no WhatsApp — pílula, não balão */
.wpp-log-pill {
    align-self: center; max-width: 85%; display: inline-flex; align-items: center; gap: 6px; margin: 8px 0;
    padding: 5px 12px; border: 1px dashed #c3cdd2; border-radius: 8px; background: rgba(255,255,255,.75);
    cursor: pointer; font: inherit; font-size: 12px; color: #667781; text-align: center; transition: background .15s, border-color .15s;
}
.wpp-log-pill:hover, .wpp-log-pill:focus-visible { background: #fff; border-color: #8696a0; outline: none; }
.wpp-log-pill .material-icons { font-size: 15px; color: #8696a0; }

/* Cartão "de onde veio" */
.wpp-info-pop {
    position: fixed; z-index: 1250; width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 10px 14px 10px 10px; border-radius: 12px;
    background: #fff; box-shadow: 0 12px 34px rgba(11,20,26,.24), 0 0 0 1px rgba(11,20,26,.05);
    font-size: 13px; color: #111b21; opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.wpp-info-pop.open { opacity: 1; visibility: visible; transform: none; }
.wpp-info-head { display: flex; align-items: center; gap: 10px; }
.wpp-info-head > .material-icons {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
    font-size: 19px; color: #fff; background: #00a884;
}
.wpp-info-head.nc > .material-icons { background: #8696a0; }
.wpp-info-head b { display: block; font-size: 13.5px; font-weight: 600; }
.wpp-info-head small { display: block; font-size: 12px; color: #667781; }
.wpp-info-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0 44px; }
.wpp-info-chips span {
    padding: 2px 8px; border-radius: 6px; background: #f0f2f5; color: #3b4a54;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
}
.wpp-info-nc { margin: 6px 0 0 44px; font-size: 11.5px; color: #8696a0; }

/* Mídia */
.wpp-media-link { display: block; margin-bottom: 3px; text-decoration: none; }
.wpp-media-img { display: block; max-width: 300px; max-height: 320px; width: auto; height: auto; border-radius: 6px; object-fit: cover; background: rgba(11,20,26,.05); cursor: pointer; }
.wpp-media-img.wpp-media-broken { display: none; }
.wpp-media-fallback { display: none; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 6px; background: rgba(11,20,26,.05); color: #027eb5; font-size: 13.5px; }
.wpp-media-img.wpp-media-broken + .wpp-media-fallback { display: inline-flex; }
.wpp-media-fallback .material-icons { font-size: 18px; }

/* Carregar mensagens anteriores */
.wpp-load-old-banner {
    align-self: center; display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 6px 14px 6px 8px;
    border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: var(--wa-shadow); cursor: pointer;
    font-size: 13px; color: #54656f; user-select: none; transition: transform .15s, box-shadow .15s;
}
.wpp-load-old-banner:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(11,20,26,.14); }
.wpp-load-old-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #d9fdd3; color: var(--wa-green-dark); }
.wpp-load-old-icon .material-icons { font-size: 16px; }
.wpp-load-old-icon.spinning { animation: spin 1s linear infinite; }

/* Barra de digitar */
.wpp-composer { flex-shrink: 0; background: var(--wa-panel); }
.conv-window-hint {
    display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 12px 0;
    font-size: 12px; font-weight: 500; cursor: help;
}
.conv-window-hint .material-icons { font-size: 14px; }
.conv-window-hint.open { color: var(--wa-green-dark); }
.conv-window-hint.closed { color: #a15c07; }
.wpp-chat-input-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px 8px; }
.wpp-input-pill { flex: 1; min-width: 0; display: flex; align-items: center; background: #fff; border-radius: 10px; padding: 0 14px; min-height: 42px; }
.wpp-input-pill input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; margin: 0; padding: 10px 0; font: inherit; font-size: 15px; color: var(--wa-text); width: auto; }
.wpp-input-pill input::placeholder { color: var(--wa-muted); }
.wpp-input-pill input:disabled { color: var(--wa-muted); }
.wpp-send-btn {
    width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; background: transparent; color: var(--wa-icon); transition: all .18s;
}
.wpp-send-btn .material-icons { font-size: 22px; }
.wpp-send-btn.ready { background: var(--wa-green); color: #fff; box-shadow: 0 3px 10px rgba(0,168,132,.35); }
.wpp-send-btn.ready:hover { background: var(--wa-green-dark); }
.wpp-send-btn:active { transform: scale(.92); }

/* Emojis */
.wpp-emoji-pop {
    position: absolute; bottom: calc(100% + 10px); left: -4px; z-index: 50; width: 300px; padding: 10px;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: #fff; border-radius: 16px;
    box-shadow: 0 10px 30px rgba(11,20,26,.2); transform-origin: bottom left; animation: wppPop .16s ease-out;
}
.wpp-emoji-pop[hidden] { display: none; }
.wpp-emoji-pop button { border: 0; background: none; border-radius: 10px; padding: 6px 0; font-size: 22px; line-height: 1; cursor: pointer; }
.wpp-emoji-pop button:hover { background: var(--wa-panel); }

/* Report toggle switch */
.report-auto-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.report-auto-toggle input { display: none; }
.report-toggle-slider { width: 40px; height: 22px; background: #d1d5db; border-radius: 11px; position: relative; transition: background 0.3s; }
.report-toggle-slider::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white;
    border-radius: 50%; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.report-auto-toggle input:checked + .report-toggle-slider { background: #10b981; }
.report-auto-toggle input:checked + .report-toggle-slider::after { transform: translateX(18px); }
.report-toggle-label { font-size: 12px; font-weight: 600; color: #374151; }

/* ============================================ */
/*   CONTROLE DE PARQUE - Full Map + Sidebar     */
/* ============================================ */

/* Section override - break out of container */
.pq-section {
    position: relative; overflow: hidden;
    height: calc(100vh - 0px);
    margin: -30px;
    padding: 0 !important;
    max-width: none !important;
    width: calc(100% + 60px);
    background: linear-gradient(160deg, #f0f4f8 0%, #e8edf5 30%, #dfe6f0 60%, #eee8f5 100%);
}
.pq-section::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(139,92,246,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(99,102,241,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(234,88,12,0.03) 0%, transparent 60%);
}

/* Top bar */
.pq-topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 20px 24px 0; pointer-events: none;
}
.pq-topbar > * { pointer-events: auto; }
.pq-title { font-size: 22px; font-weight: 800; color: var(--text-main); margin: 0; letter-spacing: -0.5px; }
.pq-subtitle { font-size: 11px; color: var(--text-muted); font-weight: 500; margin: 2px 0 0 1px; }
.pq-topbar-right { display: flex; align-items: center; gap: 10px; }

/* Source toggle group */
.pq-source-group {
    display: flex; align-items: center; gap: 4px;
    background: white; border: 1px solid var(--border);
    border-radius: 99px; padding: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pq-source-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 99px; border: none;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    background: transparent; cursor: pointer; transition: all 0.2s;
}
.pq-source-btn:hover { color: var(--text-main); background: #f8fafc; }
.pq-source-btn.active { background: var(--purple); color: white; box-shadow: 0 2px 8px rgba(139,92,246,0.3); }
.pq-source-btn.active .pq-dot { background: white !important; }
.pq-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Search */
.pq-search-wrap {
    display: flex; align-items: center;
    background: white; border: 1px solid var(--border);
    border-radius: 99px; height: 40px; width: 40px;
    overflow: hidden; transition: width 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pq-search-wrap.expanded { width: 280px; }
.pq-search-trigger {
    flex-shrink: 0; width: 40px; height: 40px; border: none;
    background: none; cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--text-muted);
    transition: color 0.2s;
}
.pq-search-trigger:hover { color: var(--purple); }
.pq-search-input {
    flex: 1; border: none; outline: none; font-size: 13px;
    background: transparent; color: var(--text-main);
    opacity: 0; pointer-events: none; transition: opacity 0.2s 0.1s;
    padding: 0; margin: 0;
}
.pq-search-wrap.expanded .pq-search-input { opacity: 1; pointer-events: auto; }

/* Search dropdown */
.pq-search-dropdown {
    position: absolute; top: 52px; right: 24px; z-index: 40;
    width: 340px; background: white; border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12); border: 1px solid var(--border);
    overflow: hidden; max-height: 60vh; display: flex; flex-direction: column;
    animation: pqDropIn 0.25s cubic-bezier(0.16,1,0.3,1);
}
.pq-search-dropdown.hidden { display: none; }
@keyframes pqDropIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pq-search-dropdown-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid var(--border);
}
.pq-search-dropdown-label { font-size: 11px; font-weight: 700; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.5px; }
.pq-search-dropdown-count {
    font-size: 10px; font-weight: 700; color: white;
    background: var(--purple); padding: 2px 8px; border-radius: 99px;
}
/* Filter chips */
.pq-filter-chips {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #f8f7ff, #f0efff);
    align-items: center;
}
.pq-filter-label {
    font-size: 11px; font-weight: 700; color: #6366f1;
    margin-right: 4px; display: flex; align-items: center; gap: 4px;
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px;
}
.pq-filter-label .material-icons { font-size: 15px; }
.pq-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 99px;
    border: 1px solid rgba(139,92,246,0.12); background: white;
    color: #64748b; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pq-chip:hover { border-color: #c4b5fd; color: var(--purple); background: #f5f3ff; transform: translateY(-1px); }
.pq-chip.active {
    background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white;
    border-color: transparent; box-shadow: 0 2px 8px rgba(139,92,246,0.3);
    transform: translateY(-1px);
}
.pq-chip.active .material-icons { color: white; }
.pq-chip .material-icons { color: #94a3b8; transition: color 0.2s; }
.pq-chip:hover .material-icons { color: var(--purple); }

/* Local filter chips (dark theme) */
.pq-local-chips {
    display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap;
    animation: pqFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.22s both;
}
.pq-chip-sm {
    padding: 4px 10px; border-radius: 99px;
    border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
    color: #475569; font-size: 10px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.pq-chip-sm:hover { border-color: rgba(99,102,241,0.3); color: #a78bfa; }
.pq-chip-sm.active {
    background: rgba(99,102,241,0.15); color: #a78bfa;
    border-color: rgba(99,102,241,0.3);
}

.pq-search-results {
    flex: 1; overflow-y: auto; padding: 6px;
}
.pq-search-results::-webkit-scrollbar { width: 4px; }
.pq-search-results::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }
.pq-search-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    transition: background 0.15s; gap: 10px;
}
.pq-search-item:hover { background: #f8fafc; }
.pq-search-item-serial { font-weight: 700; font-family: monospace; color: var(--text-main); font-size: 13px; }
.pq-search-item-lc {
    font-size: 10px; font-weight: 700; color: var(--purple);
    background: #f5f3ff; padding: 2px 8px; border-radius: 6px;
}
.pq-search-item-loc { font-size: 11px; color: var(--text-muted); }
.pq-search-item-source {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    padding: 2px 8px; border-radius: 6px; letter-spacing: 0.3px;
}
.pq-src-dp { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.25); }
.pq-src-env { background: rgba(234,88,12,0.15); color: #fb923c; border: 1px solid rgba(234,88,12,0.25); }

/* KPIs flutuantes */
.pq-kpis {
    position: absolute; bottom: 24px; left: 24px; z-index: 20;
    display: flex; gap: 12px; transition: all 0.4s;
}
.pq-kpi-card {
    background: white; padding: 14px 18px; border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); border: 1px solid var(--border);
    min-width: 100px; transition: transform 0.2s;
}
.pq-kpi-card:hover { transform: translateY(-2px); }
.pq-kpi-label { font-size: 10px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 2px; }
.pq-kpi-value { font-size: 28px; font-weight: 900; color: var(--text-main); margin: 0; letter-spacing: -1px; }
.pq-kpi-accent { color: var(--purple); }

/* Map container */
.pq-map-outer {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center; padding: 16px;
}
.pq-map-wrapper {
    width: 100%; height: 100%; max-width: 1100px; max-height: 85vh;
    display: flex; justify-content: center; align-items: center;
    position: relative;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.04));
}
.pq-map-wrapper svg {
    width: 100%; height: 100%;
}
.pq-map-wrapper svg path {
    fill: #cbd5e1; stroke: #fff; stroke-width: 1.5px;
    cursor: pointer; transition: all 0.3s ease;
    vector-effect: non-scaling-stroke;
}
.pq-map-wrapper svg path:hover { fill: #a5b4c4; filter: brightness(1.02); transform: translateY(-1px); }
.pq-map-wrapper svg path.pq-active {
    fill: var(--purple) !important;
    filter: drop-shadow(0 0 15px rgba(139,92,246,0.5)); z-index: 10;
}
.pq-map-wrapper.has-active svg path:not(.pq-active) { fill: #e2e8f0; opacity: 0.5; }
.pq-map-wrapper svg path.pq-heat-1 { fill: #ddd6fe; }
.pq-map-wrapper svg path.pq-heat-2 { fill: #c4b5fd; }
.pq-map-wrapper svg path.pq-heat-3 { fill: #a78bfa; }
.pq-map-wrapper svg path.pq-heat-4 { fill: #8b5cf6; }
.pq-map-wrapper svg path.pq-heat-5 { fill: #7c3aed; }
.pq-map-wrapper svg path.pq-heat-1:hover { fill: #c4b5fd; }
.pq-map-wrapper svg path.pq-heat-2:hover { fill: #a78bfa; }
.pq-map-wrapper svg path.pq-heat-3:hover { fill: #8b5cf6; }
.pq-map-wrapper svg path.pq-heat-4:hover { fill: #7c3aed; }
.pq-map-wrapper svg path.pq-heat-5:hover { fill: #6d28d9; }

/* ===== Caminhões em trânsito (animação no mapa) ===== */
#pq-trucks-layer { pointer-events: none; }
#pq-trucks-layer .pq-truck-g { pointer-events: all; cursor: pointer; }
/* Estrada: linha limpa curvada + bolinhas correndo em direção ao destino */
.pq-route-line {
    fill: none;
    stroke: #f59e0b;
    opacity: 0.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pq-route-dot {
    fill: #ea580c;
    filter: drop-shadow(0 0 4px rgba(234,88,12,0.6));
}
.pq-dest-pin { filter: drop-shadow(0 3px 3px rgba(0,0,0,0.28)); }
/* Contador de envios no caminhão (quando vários vão pro mesmo destino/estado) */
.pq-count-badge { paint-order: stroke; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.pq-count-text { fill: #fff; font-weight: 800; }
.pq-nto { pointer-events: none; }
.pq-nto-card { filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25)); }
.pq-nto-label { fill: #fff; font-weight: 800; letter-spacing: 0.3px; }

/* Popover interativo do caminhão (com botão "Ir para o envio") */
.pq-truck-popover {
    position: absolute;
    z-index: 30;
    background: #111827;
    color: #fff;
    padding: 12px 14px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    font-size: 13px;
    min-width: 220px;
    max-width: 280px;
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,0.08);
}
.pq-truck-popover.hidden { display: none; }
.pq-truck-popover .pqp-title { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.pq-truck-popover .pqp-row { font-size: 12.5px; line-height: 1.55; opacity: 0.95; }
.pq-truck-popover .pqp-row b { color: #fbbf24; font-weight: 700; }
.pq-truck-popover .pqp-btn {
    margin-top: 10px;
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    background: #ea580c; color: #fff; border: none;
    padding: 8px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background 0.15s;
}
.pq-truck-popover .pqp-btn:hover { background: #c2410c; }
.pq-truck {
    paint-order: stroke;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,0.30));
    transition: transform 0.15s ease;
}
.pq-truck-g:hover .pq-truck { transform: scale(1.18); }
.pq-truck-flag { filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25)); }

/* Tooltip */
.pq-tooltip {
    position: absolute; z-index: 50;
    background: var(--text-main); color: white;
    font-size: 12px; font-weight: 600; padding: 8px 14px;
    border-radius: 8px; pointer-events: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2); white-space: nowrap;
    transform: translateX(-50%) translateY(-100%); margin-top: -10px;
}
.pq-tooltip.hidden { display: none; }
.pq-tooltip-sub { font-size: 10px; font-weight: 400; color: #94a3b8; display: block; margin-top: 2px; }


/* Detail Panel - Full overlay from bottom */
.pq-detail-panel {
    position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 35;
    display: flex; align-items: flex-end;
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.4s;
}
.pq-detail-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
.pq-detail-inner {
    display: grid; grid-template-columns: 1fr 1.2fr;
    width: 100%; height: 100%;
    background: linear-gradient(155deg, #080e1a 0%, #0f1829 25%, #141e33 50%, #0d1527 75%, #0a1020 100%);
    overflow: hidden;
    box-shadow: 0 -10px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    border-top: 1px solid rgba(99,102,241,0.2);
}

/* LEFT: Territory showcase */
.pq-detail-left {
    position: relative; display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(99,102,241,0.10) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 70%, rgba(139,92,246,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.04) 0%, transparent 50%);
    padding: 40px;
    overflow: hidden;
}
/* Ambient glow behind territory */
.pq-detail-left::before {
    content: ''; position: absolute; width: 280px; height: 280px;
    border-radius: 50%; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.06) 40%, transparent 70%);
    animation: pqAmbientPulse 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pqAmbientPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

.pq-detail-close {
    position: absolute; top: 20px; left: 20px; z-index: 10;
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    color: #64748b; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s; backdrop-filter: blur(8px);
}
.pq-detail-close:hover { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); transform: scale(1.05); }
.pq-detail-close .material-icons { font-size: 20px; }

.pq-detail-overlay {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    animation: pqFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes pqFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Territory container with flag mask */
.pq-territory-container {
    position: relative; width: 220px; height: 200px;
    animation: pqHeroFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(99,102,241,0.5)) drop-shadow(0 0 70px rgba(139,92,246,0.25));
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1); opacity: 0;
}
.pq-territory-container.loaded { opacity: 1; }

/* Flag image masked by territory shape */
.pq-flag-masked {
    position: absolute; inset: -20%; width: 140%; height: 140%;
    object-fit: cover;
}

/* Territory outline (hidden, used only for preloading mask) */
.pq-territory-outline {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; overflow: hidden;
}

@keyframes pqHeroFloat {
    0% { transform: translateY(0) scale(1) rotate(0deg);
         filter: drop-shadow(0 0 25px rgba(99,102,241,0.45)) drop-shadow(0 0 60px rgba(139,92,246,0.2)); }
    25% { transform: translateY(-8px) scale(1.02) rotate(0.5deg);
          filter: drop-shadow(0 0 35px rgba(99,102,241,0.6)) drop-shadow(0 0 70px rgba(139,92,246,0.3)); }
    50% { transform: translateY(-14px) scale(1.04) rotate(0deg);
          filter: drop-shadow(0 0 45px rgba(99,102,241,0.8)) drop-shadow(0 0 90px rgba(139,92,246,0.4)); }
    75% { transform: translateY(-6px) scale(1.01) rotate(-0.5deg);
          filter: drop-shadow(0 0 30px rgba(99,102,241,0.55)) drop-shadow(0 0 65px rgba(139,92,246,0.25)); }
    100% { transform: translateY(0) scale(1) rotate(0deg);
           filter: drop-shadow(0 0 25px rgba(99,102,241,0.45)) drop-shadow(0 0 60px rgba(139,92,246,0.2)); }
}

.pq-detail-uf-badge span {
    display: inline-block;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
    color: #a78bfa; padding: 6px 20px; border-radius: 20px;
    font-size: 12px; font-weight: 700; font-family: monospace;
    border: 1px solid rgba(99,102,241,0.2); letter-spacing: 2px;
    backdrop-filter: blur(4px);
}
.pq-detail-state-name {
    font-size: 26px; font-weight: 800; color: #f1f5f9;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 16px rgba(99,102,241,0.35);
}

/* RIGHT: Info panel */
.pq-detail-right {
    border-left: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(180deg, rgba(15,24,41,0.6) 0%, rgba(10,16,32,0.8) 100%);
    overflow: hidden; display: flex; flex-direction: column;
}
.pq-detail-right-scroll {
    flex: 1; overflow-y: auto; padding: 28px 24px;
}
.pq-detail-right-scroll::-webkit-scrollbar { width: 4px; }
.pq-detail-right-scroll::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 2px; }

.pq-detail-header {
    margin-bottom: 20px;
    animation: pqFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}
.pq-detail-live {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, rgba(52,211,153,0.1), rgba(16,185,129,0.08));
    color: #34d399; border: 1px solid rgba(52,211,153,0.2);
    border-radius: 8px; padding: 4px 12px; font-size: 10px; font-weight: 700;
    letter-spacing: 0.8px; margin-bottom: 10px;
}
.pq-detail-live .material-icons { font-size: 12px; animation: pqLivePulse 2s ease-in-out infinite; }
@keyframes pqLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pq-detail-title { font-size: 28px; font-weight: 900; color: #f1f5f9; letter-spacing: -0.5px; }
.pq-detail-subtitle { font-size: 13px; color: #475569; margin-top: 4px; }

.pq-detail-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;
    animation: pqFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
.pq-detail-stat-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 16px; text-align: center;
    transition: all 0.3s; position: relative; overflow: hidden;
}
.pq-detail-stat-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), transparent);
    opacity: 0; transition: opacity 0.3s;
}
.pq-detail-stat-card:hover::before { opacity: 1; }
.pq-detail-stat-card:hover { border-color: rgba(99,102,241,0.25); transform: translateY(-2px); }
.pq-detail-stat-label {
    display: block; font-size: 10px; color: #475569;
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; font-weight: 600;
    position: relative;
}
.pq-detail-stat-value { display: block; font-size: 28px; font-weight: 900; color: #e2e8f0; position: relative; }
.pq-val-green { color: #34d399; }

.pq-detail-filter {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 16px; transition: all 0.3s;
    animation: pqFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
.pq-detail-filter:focus-within { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.05); box-shadow: 0 0 0 3px rgba(99,102,241,0.08); }
.pq-detail-filter input {
    flex: 1; border: none; outline: none; font-size: 13px;
    background: transparent; color: #e2e8f0; padding: 0; margin: 0;
}
.pq-detail-filter input::placeholder { color: #3e4a5e; }

.pq-detail-list-header {
    display: flex; align-items: center; gap: 6px; font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: #3e4a5e; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 10px;
    animation: pqFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.25s both;
}
.pq-detail-lc-list { flex: 1; overflow-y: auto; }
.pq-detail-lc-list::-webkit-scrollbar { width: 3px; }
.pq-detail-lc-list::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 2px; }

.pq-lc-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; overflow: hidden; margin-bottom: 10px;
    transition: all 0.3s;
}
.pq-lc-card:hover { border-color: rgba(99,102,241,0.25); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.pq-lc-card.highlight { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.2), 0 4px 20px rgba(99,102,241,0.1); animation: pqPulse 3s ease-in-out infinite; }
@keyframes pqPulse { 0%,100% { background: rgba(255,255,255,0.03); } 50% { background: rgba(99,102,241,0.06); } }

.pq-lc-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; cursor: pointer; transition: background 0.2s;
    user-select: none;
}
.pq-lc-head:hover { background: rgba(255,255,255,0.03); }
.pq-lc-avatar {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 10px; font-weight: 800;
    box-shadow: 0 3px 10px rgba(139,92,246,0.3); flex-shrink: 0;
}
.pq-lc-title { font-weight: 800; font-size: 14px; color: #e2e8f0; }
.pq-lc-city { font-size: 10px; color: #475569; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }
.pq-lc-count-badge {
    font-size: 11px; font-weight: 700; color: #a78bfa;
    background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2);
    padding: 4px 12px; border-radius: 99px;
}

.pq-lc-details {
    max-height: 0; overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1);
    background: rgba(0,0,0,0.12); border-top: 1px solid rgba(255,255,255,0.03);
}
.pq-lc-details.open { max-height: 600px; overflow-y: auto; }

.pq-serial-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; font-size: 12px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.03); transition: all 0.2s;
}
.pq-serial-item:last-child { border-bottom: none; }
.pq-serial-item:hover { background: rgba(99,102,241,0.06); padding-left: 20px; }
.pq-serial-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pq-serial-num { font-weight: 700; font-family: monospace; color: #e2e8f0; letter-spacing: -0.3px; font-size: 13px; }
.pq-serial-selb { font-size: 10px; color: #64748b; font-family: monospace; font-weight: 500; }
.pq-serial-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pq-serial-date { font-size: 10px; color: #3e4a5e; font-weight: 500; }

.pq-source-tag {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    padding: 3px 8px; border-radius: 6px; letter-spacing: 0.3px;
}

/* No results */
.pq-no-results {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px; color: #3e4a5e; background: rgba(255,255,255,0.02);
    border-radius: 12px; border: 1px dashed rgba(255,255,255,0.06); margin: 10px 0;
}
.pq-no-results.hidden { display: none; }
.pq-no-results p { font-size: 12px; margin: 8px 0 0; }

/* Legend */
.pq-legend {
    position: absolute; bottom: 24px; right: 24px; z-index: 20;
    display: flex; align-items: center; gap: 8px;
    background: white; padding: 8px 16px; border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid var(--border);
    font-size: 11px;
}
.pq-legend-label { font-weight: 700; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.pq-legend-item { display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-weight: 500; }
.pq-legend-color { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.08); }

@media (max-width: 1024px) {
    .pq-detail-inner { grid-template-columns: 0.8fr 1fr; }
    .pq-territory-container { width: 180px; height: 160px; }
    .pq-topbar { flex-direction: column; gap: 6px; }
    .pq-topbar-right { width: 100%; justify-content: flex-end; }
}

/* Mobile - Conversations */
@media (max-width: 768px) {
    #section-conversations { padding: 0; position: relative; height: calc(100vh - 130px); }
    .wpp-wrapper { flex-direction: column; height: 100%; border-radius: 12px; }
    .wpp-left { width: 100%; min-width: 100%; max-width: 100%; height: 100%; border-right: 0; }
    .wpp-right { display: none; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 10; }
    .wpp-left.conv-mobile-hidden { display: none; }
    .wpp-right.conv-mobile-show { display: flex; flex-direction: column; }
    .wpp-back-btn { display: flex; }
    .wpp-chat-topbar { border-left: 0; padding-left: 6px; }
    .wpp-chat-body { padding: 10px 14px; }
    .wpp-new-msgs-divider { margin-left: -14px; margin-right: -14px; }
    .wpp-msg { max-width: 85%; }
    .wpp-media-img { max-width: 220px; }
    .wpp-conn span:last-child { display: none; }
    .wpp-conn { padding: 5px; }
    .wpp-emoji-pop { width: 260px; }

    /* Parque mobile */
    .pq-section { margin: -15px; width: calc(100% + 30px); height: calc(100vh - 80px); }
    .pq-detail-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 56px; z-index: 1000; }
    .pq-detail-inner { grid-template-columns: 1fr !important; height: 100%; grid-template-rows: auto 1fr; }
    .pq-detail-left { min-height: 180px; max-height: 35vh; padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .pq-detail-right { flex: 1; overflow-y: auto; min-height: 0; }
    .pq-detail-right-scroll { padding: 16px; }
    .pq-territory-container { width: 140px; height: 120px; }
    .pq-detail-state-name { font-size: 18px; }
    .pq-detail-title { font-size: 22px; }
    .pq-detail-stat-value { font-size: 22px; }
    .pq-topbar { padding: 12px 14px 0; }
    .pq-title { font-size: 18px; }
    .pq-topbar-right { width: 100%; justify-content: flex-end; }
    .pq-source-group { padding: 3px; }
    .pq-source-btn { padding: 4px 8px; font-size: 10px; }
    .pq-kpis { left: 10px; bottom: 10px; gap: 6px; }
    .pq-kpi-card { padding: 8px 12px; min-width: 70px; }
    .pq-kpi-value { font-size: 20px; }
    .pq-legend { bottom: 10px; right: 10px; padding: 5px 8px; font-size: 8px; gap: 4px; }
    .pq-legend-color { width: 10px; height: 10px; }
    .pq-search-dropdown { left: 14px; right: 14px; width: auto; top: 90px; max-height: 50vh; }
    .pq-filter-chips { padding: 8px 10px; gap: 5px; flex-wrap: wrap; }
    .pq-filter-label { font-size: 10px; margin-right: 2px; }
    .pq-chip { padding: 4px 10px; font-size: 10px; }
    .pq-chip .material-icons { font-size: 12px; }
    .pq-search-wrap.expanded { width: 200px; }
}