@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/*
 * IVP Panel Envío Suite — CSS visual v2.4 (Fase 3 estabilizada)
 * Basado en el diseño Figma: Centro de Envíos
 * Prefijo exclusivo: .ivpse-  /  .ivp-
 * NO usa estilos globales. Todo scoped dentro de .ivpse-wrap.
 * NO requiere Tailwind ni frameworks externos.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. TOKENS DE DISEÑO (CSS custom properties)
   Origen Figma: colores, sombras, radios y tipografía del App.tsx
══════════════════════════════════════════════════════════════════════ */
.ivpse-wrap,
.ivpse-wrap * {
    box-sizing: border-box;
}

.ivpse-wrap {
    --ivp-bg:          #F5F7FA;
    --ivp-card:        #FFFFFF;
    --ivp-border:      rgba(15, 23, 42, .08);
    --ivp-border-soft: #f1f5f9;
    --ivp-text:        #0f172a;
    --ivp-text2:       #334155;
    --ivp-muted:       #64748b;
    --ivp-muted2:      #94a3b8;
    --ivp-blue:        #1F7AE0;
    --ivp-blue-dk:     #1868C0;
    --ivp-blue-bg:     #eff6ff;
    --ivp-blue-border: #bfdbfe;
    --ivp-green:       #059669;
    --ivp-green-bg:    #ecfdf5;
    --ivp-green-border:#a7f3d0;
    --ivp-red:         #dc2626;
    --ivp-red-bg:      #fef2f2;
    --ivp-red-border:  #fecaca;
    --ivp-amber:       #d97706;
    --ivp-amber-bg:    #fffbeb;
    --ivp-amber-border:#fde68a;
    --ivp-gray-bg:     #f1f5f9;
    --ivp-gray-border: #e2e8f0;
    --ivp-gray-text:   #475569;

    --ivp-radius-xl:   22px;
    --ivp-radius-lg:   16px;
    --ivp-radius-md:   12px;
    --ivp-radius-sm:   8px;
    --ivp-radius-pill: 999px;

    --ivp-shadow:      0 1px 2px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06);
    --ivp-shadow-md:   0 4px 24px rgba(15,23,42,.10);
    --ivp-shadow-sm:   0 1px 2px rgba(15,23,42,.05);

    --ivp-font:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ivp-font-mono:   'JetBrains Mono', 'Fira Mono', ui-monospace, monospace;

    font-family:       var(--ivp-font);
    font-size:         14px;
    color:             var(--ivp-text);
    background:        var(--ivp-bg);
    line-height:       1.5;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════
   2. LAYOUT PRINCIPAL
══════════════════════════════════════════════════════════════════════ */
.ivpse-wrap {
    max-width: 1380px;
    margin: 0 auto;
    padding: 24px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Anular márgenes del tema de WordPress dentro del panel */
.ivpse-wrap h1, .ivpse-wrap h2, .ivpse-wrap h3,
.ivpse-wrap h4, .ivpse-wrap p {
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   3. CARD BASE
   Origen Figma: Card component — bg-white rounded-[22px] border shadow-sm
══════════════════════════════════════════════════════════════════════ */
.ivpse-card {
    background:    var(--ivp-card);
    border-radius: var(--ivp-radius-xl);
    border:        1px solid var(--ivp-border);
    box-shadow:    var(--ivp-shadow);
}

/* ═══════════════════════════════════════════════════════════════════
   4. HEADER
   Origen Figma: Header card — truck icon, title, badges
══════════════════════════════════════════════════════════════════════ */
.ivpse-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ivpse-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ivpse-logo {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: var(--ivp-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(31,122,224,.25);
}

.ivpse-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ivp-text);
    line-height: 1.2;
}

.ivpse-header p {
    font-size: 13px;
    color: var(--ivp-muted);
    margin-top: 2px;
}

.ivpse-header-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ivpse-system-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--ivp-radius-pill);
    background: var(--ivp-green-bg);
    border: 1px solid var(--ivp-green-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--ivp-green);
}
.ivpse-system-online i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ivp-green);
    animation: ivpse-pulse 2s infinite;
}

.ivpse-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--ivp-radius-pill);
    background: var(--ivp-gray-bg);
    border: 1px solid var(--ivp-gray-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--ivp-gray-text);
}

@keyframes ivpse-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* ═══════════════════════════════════════════════════════════════════
   5. STATS GRID
   Origen Figma: 4 metric cards — icon tinted bg, big number, subtitle
══════════════════════════════════════════════════════════════════════ */
.ivpse-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ivpse-stat-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ivpse-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--ivp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.ivpse-stat-blue  .ivpse-stat-icon { background: var(--ivp-blue-bg);  color: var(--ivp-blue);  }
.ivpse-stat-green .ivpse-stat-icon { background: var(--ivp-green-bg); color: var(--ivp-green); }
.ivpse-stat-red   .ivpse-stat-icon { background: var(--ivp-red-bg);   color: var(--ivp-red);   }
.ivpse-stat-orange .ivpse-stat-icon { background: var(--ivp-amber-bg); color: var(--ivp-amber); }

.ivpse-stat-card strong {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--ivp-text);
}
.ivpse-stat-red strong { color: var(--ivp-red); }

.ivpse-stat-card h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--ivp-text2);
    margin-top: 4px;
}

.ivpse-stat-card p {
    font-size: 11px;
    color: var(--ivp-muted2);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   6. ACTIONS BAR
   Origen Figma: Card with 4 action buttons inline
══════════════════════════════════════════════════════════════════════ */
.ivpse-actions {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   7. BUTTONS
   Origen Figma: Btn component — rounded-xl, variants, pill shape
══════════════════════════════════════════════════════════════════════ */
.ivpse-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: var(--ivp-radius-md);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ivp-font);
    text-decoration: none !important;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, box-shadow .15s, opacity .15s, transform .1s;
    white-space: nowrap;
    line-height: 1.4;
}
.ivpse-btn:focus-visible {
    outline: 2px solid var(--ivp-blue);
    outline-offset: 2px;
}
.ivpse-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

.ivpse-btn-primary {
    background: var(--ivp-blue);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(31,122,224,.18);
}
.ivpse-btn-primary:hover:not(:disabled) {
    background: var(--ivp-blue-dk);
    box-shadow: 0 6px 18px rgba(31,122,224,.28);
}

.ivpse-btn-secondary {
    background: #fff !important;
    color: var(--ivp-text2) !important;
    border-color: var(--ivp-gray-border) !important;
    box-shadow: var(--ivp-shadow-sm);
}
.ivpse-btn-secondary:hover:not(:disabled) {
    background: var(--ivp-gray-bg) !important;
    border-color: #cbd5e1 !important;
}

.ivpse-btn-danger {
    background: var(--ivp-red-bg) !important;
    color: var(--ivp-red) !important;
    border-color: var(--ivp-red-border) !important;
}
.ivpse-btn-danger:hover:not(:disabled) {
    background: #fee2e2 !important;
}

.ivpse-btn-success {
    background: var(--ivp-green) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(5,150,105,.2);
}
.ivpse-btn-success:hover:not(:disabled) {
    background: #047857 !important;
}

.ivpse-btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: var(--ivp-radius-sm);
    gap: 5px;
}
.ivpse-btn-lg {
    padding: 10px 22px;
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   8. BADGES
   Origen Figma: Badge component — rounded-full, color variants
══════════════════════════════════════════════════════════════════════ */
.ivpse-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--ivp-radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

.ivpse-badge-blue {
    background: var(--ivp-blue-bg);
    color: var(--ivp-blue);
    border: 1px solid var(--ivp-blue-border);
}
.ivpse-badge-green {
    background: var(--ivp-green-bg);
    color: var(--ivp-green);
    border: 1px solid var(--ivp-green-border);
}
.ivpse-badge-red {
    background: var(--ivp-red-bg);
    color: var(--ivp-red);
    border: 1px solid var(--ivp-red-border);
}
.ivpse-badge-gray {
    background: var(--ivp-gray-bg);
    color: var(--ivp-gray-text);
    border: 1px solid var(--ivp-gray-border);
}
.ivpse-badge-amber {
    background: var(--ivp-amber-bg);
    color: var(--ivp-amber);
    border: 1px solid var(--ivp-amber-border);
}

/* ═══════════════════════════════════════════════════════════════════
   9. SEARCH BAR
   Origen Figma: SearchBar — input with icon, Filtros btn, date pills
══════════════════════════════════════════════════════════════════════ */
.ivpse-search {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ivpse-search-field {
    flex: 1;
    position: relative;
}
.ivpse-search-field span {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ivp-muted2);
    pointer-events: none;
    display: flex;
}
.ivpse-search-field input[type="search"] {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: var(--ivp-gray-bg);
    border: 1px solid var(--ivp-gray-border);
    border-radius: var(--ivp-radius-md);
    font-family: var(--ivp-font);
    font-size: 13px;
    color: var(--ivp-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}
.ivpse-search-field input[type="search"]:focus {
    border-color: var(--ivp-blue);
    box-shadow: 0 0 0 3px rgba(31,122,224,.12);
    background: #fff;
}
.ivpse-search-field input[type="search"]::placeholder {
    color: var(--ivp-muted2);
}

.ivpse-filter-btn {
    flex-shrink: 0;
}

.ivpse-date-pills {
    display: flex;
    align-items: center;
    background: var(--ivp-gray-bg);
    border-radius: var(--ivp-radius-md);
    padding: 4px;
    gap: 2px;
    flex-shrink: 0;
}
.ivpse-date-pills a {
    display: block;
    padding: 5px 12px;
    border-radius: var(--ivp-radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--ivp-muted);
    text-decoration: none !important;
    transition: background .12s, color .12s;
}
.ivpse-date-pills a:hover,
.ivpse-date-pills a.is-active {
    background: #fff;
    color: var(--ivp-text);
    box-shadow: var(--ivp-shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   10. MAIN TABS
   Origen Figma: Tab pill row — active tab = bg-blue, inactive = ghost
══════════════════════════════════════════════════════════════════════ */
.ivpse-main-tabs {
    display: inline-flex;
    align-items: center;
    background: var(--ivp-card);
    border: 1px solid var(--ivp-border);
    border-radius: var(--ivp-radius-xl);
    padding: 6px;
    gap: 2px;
    box-shadow: var(--ivp-shadow-sm);
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ivpse-main-tabs a {
    display: block;
    padding: 8px 20px;
    border-radius: var(--ivp-radius-lg);
    font-size: 13px;
    font-weight: 600;
    color: var(--ivp-muted);
    text-decoration: none !important;
    transition: background .15s, color .15s, box-shadow .15s;
}
.ivpse-main-tabs a:hover {
    color: var(--ivp-text);
    background: var(--ivp-gray-bg);
}
.ivpse-main-tabs a.is-active {
    background: var(--ivp-blue);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(31,122,224,.22);
}

/* ═══════════════════════════════════════════════════════════════════
   11. SUBTABS (guía views)
   Origen Figma: SubTabs — pills with count badges
══════════════════════════════════════════════════════════════════════ */
.ivpse-subtabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.ivpse-subtabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: var(--ivp-radius-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--ivp-muted);
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background .12s, color .12s, border-color .12s;
}
.ivpse-subtabs a:hover {
    color: var(--ivp-text);
    background: var(--ivp-gray-bg);
}
.ivpse-subtabs a.is-active {
    color: var(--ivp-text);
    background: #fff;
    border-color: var(--ivp-gray-border);
    box-shadow: var(--ivp-shadow-sm);
    font-weight: 600;
}

.ivpse-subtabs a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ivp-radius-pill);
    font-size: 11px;
    font-weight: 700;
    background: var(--ivp-gray-bg);
    color: var(--ivp-muted);
    line-height: 1;
}
.ivpse-subtabs a.is-active span {
    background: var(--ivp-blue-bg);
    color: var(--ivp-blue);
}

/* ═══════════════════════════════════════════════════════════════════
   12. BULK BAR
   Origen Figma: BulkBar — checkbox, text, Seleccionar todo, action btn
══════════════════════════════════════════════════════════════════════ */
.ivpse-bulk {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ivpse-check-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    cursor: pointer;
    min-width: 0;
}

.ivpse-check-line input[type="checkbox"],
.ivp_panel_envio_order_check,
.ivp-order-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ivp-gray-border);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ivpse-check-line input[type="checkbox"]:checked,
.ivp_panel_envio_order_check:checked,
.ivp-order-checkbox:checked {
    background: var(--ivp-blue);
    border-color: var(--ivp-blue);
}
.ivpse-check-line input[type="checkbox"]:checked::after,
.ivp_panel_envio_order_check:checked::after,
.ivp-order-checkbox:checked::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

.ivpse-check-line span {
    font-size: 13px;
    color: var(--ivp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ivpse-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ivpse-link-action {
    font-size: 12px;
    font-weight: 600;
    color: var(--ivp-blue);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: none;
    font-family: var(--ivp-font);
}
.ivpse-link-action:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   13. ORDER LIST & CARDS
   Origen Figma: PendingGuides, CreatedToday, ErrorOrders — card list
══════════════════════════════════════════════════════════════════════ */
.ivpse-order-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ivpse-order-card {
    padding: 20px 24px;
    transition: box-shadow .15s;
}
.ivpse-order-card:hover {
    box-shadow: var(--ivp-shadow-md);
}
.ivpse-order-card.is-error {
    border-color: var(--ivp-red-border);
    background: var(--ivp-red-bg);
}
.ivpse-order-card.is-created {
    border-color: var(--ivp-green-border);
}

/* Order head: id+name left, badge right */
.ivpse-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ivpse-order-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.ivpse-order-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ivp-text);
    line-height: 1.1;
}

.ivpse-order-title p {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--ivp-muted);
    margin-top: 3px;
}

/* Fake checkbox for "procesando" state */
.ivpse-fake-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ivp-gray-border);
    display: inline-block;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: .4;
}

/* Info grid — 2 columns, 4 cells */
.ivpse-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ivp-border-soft);
}

.ivpse-info-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ivpse-info-grid span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ivp-muted2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ivpse-info-grid strong {
    font-size: 13px;
    font-weight: 500;
    color: var(--ivp-text2);
    line-height: 1.35;
}

/* Error box */
.ivpse-error-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--ivp-red-bg);
    border: 1px solid var(--ivp-red-border);
    border-radius: var(--ivp-radius-md);
    font-size: 13px;
    color: #b91c1c;
    line-height: 1.45;
}
.ivpse-order-card.is-error .ivpse-error-box {
    background: #fff;
}

/* Order actions footer */
.ivpse-order-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ivp-border-soft);
}

/* Empty state */
.ivpse-empty {
    padding: 48px 24px;
    text-align: center;
}
.ivpse-empty h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--ivp-muted);
    margin-top: 12px;
}
.ivpse-empty p {
    font-size: 13px;
    color: var(--ivp-muted2);
    margin-top: 4px;
}

/* Inline alert */
#ivp-alerta, .ivpse-alert {
    border-radius: var(--ivp-radius-md);
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
}
.ivp-alerta-ok {
    background: var(--ivp-green-bg);
    border: 1px solid var(--ivp-green-border);
    color: var(--ivp-green);
}
.ivp-alerta-error {
    background: var(--ivp-red-bg);
    border: 1px solid var(--ivp-red-border);
    color: var(--ivp-red);
}

/* ═══════════════════════════════════════════════════════════════════
   14. MANUAL FORM
   Origen Figma: ManualGuide — 3-column card grid, readonly fields
══════════════════════════════════════════════════════════════════════ */
.ivpse-manual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.ivpse-form-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ivpse-form-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ivp-border-soft);
}

.ivpse-form-title h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ivp-text);
}

.ivpse-form-card label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ivp-muted2);
}

.ivpse-form-card input,
.ivpse-form-card select,
.ivpse-form-card textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--ivp-gray-bg);
    border: 1px solid var(--ivp-gray-border);
    border-radius: var(--ivp-radius-md);
    font-family: var(--ivp-font);
    font-size: 13px;
    color: var(--ivp-text2);
    font-weight: 500;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.ivpse-form-card input:focus,
.ivpse-form-card select:focus,
.ivpse-form-card textarea:focus {
    border-color: var(--ivp-blue);
    box-shadow: 0 0 0 3px rgba(31,122,224,.1);
    background: #fff;
}
.ivpse-form-card input:disabled {
    color: var(--ivp-muted);
    cursor: default;
}
.ivpse-form-card textarea {
    resize: vertical;
    min-height: 72px;
}

.ivpse-carrier-box {
    margin-top: 4px;
    padding: 14px;
    background: var(--ivp-blue-bg);
    border: 1px solid var(--ivp-blue-border);
    border-radius: var(--ivp-radius-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ivpse-carrier-box span {
    font-size: 11px;
    font-weight: 600;
    color: var(--ivp-blue);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ivpse-carrier-box strong {
    font-size: 15px;
    font-weight: 700;
    color: #1e40af;
}
.ivpse-carrier-box small {
    font-size: 11px;
    color: var(--ivp-blue);
}

.ivpse-manual-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 8px 0 0;
}
.ivp-manual-note {
    font-size: 12px;
    color: var(--ivp-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   15. EXPORT MODULE
   Origen Figma: ExportSection — 2 cards, column chips, period picker
══════════════════════════════════════════════════════════════════════ */
.ivpse-export-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ivpse-export-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ivpse-export-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ivpse-export-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--ivp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ivpse-export-operativo .ivpse-export-icon { background: var(--ivp-blue-bg); color: var(--ivp-blue); }
.ivpse-export-admin     .ivpse-export-icon { background: var(--ivp-gray-bg); color: var(--ivp-gray-text); }

.ivpse-export-head > div h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ivp-text);
    margin-bottom: 4px;
}

.ivpse-export-card > p {
    font-size: 13px;
    color: var(--ivp-muted);
    line-height: 1.6;
}

.ivpse-export-card h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ivp-muted2);
    margin-bottom: 6px;
}

/* Column chips */
.ivpse-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ivpse-chip-list span {
    padding: 4px 10px;
    background: var(--ivp-gray-bg);
    border: 1px solid var(--ivp-gray-border);
    border-radius: var(--ivp-radius-sm);
    font-size: 11px;
    font-family: var(--ivp-font-mono);
    color: var(--ivp-gray-text);
}

.ivpse-chip-list span.is-highlight {
    background: var(--ivp-green-bg);
    border-color: var(--ivp-green-border);
    color: var(--ivp-green);
    font-weight: 700;
}

.ivpse-green-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ivp-green);
    margin-top: -4px;
}

/* Period picker */
.ivpse-export-period {
    display: flex;
    gap: 8px;
}

.ivpse-export-period select,
.ivpse-export-status select {
    padding: 8px 12px;
    background: var(--ivp-gray-bg);
    border: 1px solid var(--ivp-gray-border);
    border-radius: var(--ivp-radius-md);
    font-family: var(--ivp-font);
    font-size: 13px;
    color: var(--ivp-text2);
    outline: none;
    cursor: pointer;
    width: 100%;
}
.ivpse-export-period select:focus,
.ivpse-export-status select:focus {
    border-color: var(--ivp-blue);
    box-shadow: 0 0 0 3px rgba(31,122,224,.1);
}

.ivpse-export-range {
    font-size: 12px;
    color: var(--ivp-muted2);
    background: var(--ivp-gray-bg);
    border-radius: var(--ivp-radius-sm);
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: -4px;
}

.ivpse-export-status {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ivp-muted2);
}

.ivpse-restricted-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ivp-amber-bg);
    border: 1px solid var(--ivp-amber-border);
    border-radius: var(--ivp-radius-md);
    font-size: 12px;
    color: #92400e;
    line-height: 1.5;
}

.ivpse-export-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
.ivpse-export-actions .ivpse-btn {
    flex: 1;
    justify-content: center;
}

/* Export alert */
.ivpse-export-alert {
    grid-column: 1 / -1;
    border-radius: var(--ivp-radius-md);
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   16. MÓDULO ARMADO (scanner override)
   Los estilos del scanner heredado reciben soporte visual mínimo
   sin modificar su HTML ni lógica.
══════════════════════════════════════════════════════════════════════ */
.ivpse-module-armado,
.ivpse-module-monitor {
    background: var(--ivp-card);
    border-radius: var(--ivp-radius-xl);
    border: 1px solid var(--ivp-border);
    box-shadow: var(--ivp-shadow);
    padding: 24px;
    min-height: 200px;
}

/* Override básico de controles del scanner para no chocar con el tema */
.ivpse-module-armado input[type="text"],
.ivpse-module-armado input[type="number"],
.ivpse-module-armado select {
    border-radius: var(--ivp-radius-md) !important;
    font-family: var(--ivp-font) !important;
}

.ivpse-module-armado button:not([class*="ivpse-"]) {
    border-radius: var(--ivp-radius-md);
    font-family: var(--ivp-font);
}

/* ═══════════════════════════════════════════════════════════════════
   17. PANEL LATERAL VER PEDIDO
   Origen Figma: OrderPanel — 480px slide-in, backdrop blur, sections
══════════════════════════════════════════════════════════════════════ */
.ivpse-order-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 99900;
    display: flex;
    justify-content: flex-end;
}

.ivpse-order-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ivpse-order-panel {
    position: relative;
    width: 480px;
    max-width: 100vw;
    height: 100%;
    background: #fff;
    box-shadow: var(--ivp-shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ivpse-panel-in .22s cubic-bezier(.25,.8,.25,1);
}

@keyframes ivpse-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.ivpse-panel-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--ivp-border-soft);
    padding: 18px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.ivpse-panel-header-info .panel-id {
    font-size: 18px;
    font-weight: 700;
    color: var(--ivp-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ivpse-panel-header-info .panel-name {
    font-size: 13px;
    color: var(--ivp-muted);
    margin-top: 2px;
}

.ivpse-panel-close {
    width: 32px;
    height: 32px;
    border-radius: var(--ivp-radius-md);
    background: var(--ivp-gray-bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ivp-muted);
    font-size: 14px;
    font-family: var(--ivp-font);
    transition: background .12s;
    flex-shrink: 0;
}
.ivpse-panel-close:hover {
    background: var(--ivp-gray-border);
}

.ivpse-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Panel sections */
.ivpse-panel-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ivp-muted2);
    margin-bottom: 8px;
}

.ivpse-panel-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ivp-text2);
}
.ivpse-panel-contact-row svg {
    color: var(--ivp-muted2);
    flex-shrink: 0;
}

.ivpse-panel-product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ivp-gray-bg);
    border-radius: var(--ivp-radius-md);
}

.ivpse-panel-product-thumb {
    width: 34px;
    height: 34px;
    border-radius: var(--ivp-radius-sm);
    background: var(--ivp-gray-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ivp-muted2);
}

.ivpse-panel-product-row .name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ivp-text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ivpse-panel-product-row .sku {
    font-size: 11px;
    color: var(--ivp-muted2);
    font-family: var(--ivp-font-mono);
}
.ivpse-panel-product-row .qty {
    font-size: 13px;
    font-weight: 700;
    color: var(--ivp-text2);
    margin-left: auto;
    flex-shrink: 0;
}

.ivpse-panel-shipment-grid {
    background: var(--ivp-gray-bg);
    border-radius: var(--ivp-radius-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ivpse-panel-shipment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}
.ivpse-panel-shipment-row span:first-child {
    color: var(--ivp-muted);
}

.ivpse-panel-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ivpse-panel-event {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ivpse-panel-event .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ivp-green);
    margin-top: 5px;
    flex-shrink: 0;
}
.ivpse-panel-event .ev-text {
    font-size: 13px;
    color: var(--ivp-text2);
}
.ivpse-panel-event .ev-date {
    font-size: 11px;
    color: var(--ivp-muted2);
    margin-top: 1px;
}

.ivpse-panel-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--ivp-border-soft);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ivpse-panel-footer .ivpse-btn {
    flex: 1;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   18. LOGIN & DENIED SCREENS
══════════════════════════════════════════════════════════════════════ */
.ivpse-login {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.ivpse-login-card {
    background: var(--ivp-card);
    border: 1px solid var(--ivp-border);
    border-radius: var(--ivp-radius-xl);
    box-shadow: var(--ivp-shadow-md);
    padding: 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.ivpse-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: var(--ivp-radius-pill);
    background: var(--ivp-green-bg);
    border: 1px solid var(--ivp-green-border);
    font-size: 11px;
    font-weight: 600;
    color: var(--ivp-green);
    margin-bottom: 20px;
}
.ivpse-login-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ivp-green);
    display: inline-block;
}

.ivpse-login-card h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--ivp-text);
    margin-bottom: 10px;
}

.ivpse-login-card p {
    font-size: 14px;
    color: var(--ivp-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.ivpse-login-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ivpse-login-actions .ivpse-btn {
    justify-content: center;
    padding: 11px;
}

.ivpse-denied {
    padding: 48px 24px;
    text-align: center;
    color: var(--ivp-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   19. RESPONSIVO
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .ivpse-stats { grid-template-columns: repeat(2, 1fr); }
    .ivpse-export-grid { grid-template-columns: 1fr; }
    .ivpse-manual-grid { grid-template-columns: 1fr 1fr; }
    .ivpse-manual-actions { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .ivpse-wrap { padding: 12px 14px 32px; gap: 12px; }
    .ivpse-stats { grid-template-columns: 1fr 1fr; }
    .ivpse-main-tabs { width: 100%; }
    .ivpse-manual-grid { grid-template-columns: 1fr; }
    .ivpse-order-panel { width: 100%; }
    .ivpse-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ivpse-info-grid { grid-template-columns: 1fr; }
    .ivpse-order-actions { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .ivpse-stats { grid-template-columns: 1fr; }
    .ivpse-actions { flex-direction: column; align-items: stretch; }
    .ivpse-actions .ivpse-btn { justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════
   20. UTILIDADES DE ESTADO
   Reemplaza style="display:none" en PHP — más limpio y overrideable.
══════════════════════════════════════════════════════════════════════ */
.ivpse-hidden {
    display: none !important;
}

/* SVG icon size helpers — eliminan style="width/height" inline en PHP */
.ivpse-wrap svg.ivpse-icon-xs { width: 11px; height: 11px; flex-shrink: 0; }
.ivpse-wrap svg.ivpse-icon-sm { width: 14px; height: 14px; flex-shrink: 0; }
.ivpse-wrap svg.ivpse-icon-md { width: 16px; height: 16px; flex-shrink: 0; }
.ivpse-wrap svg.ivpse-icon-lg { width: 22px; height: 22px; flex-shrink: 0; }
.ivpse-wrap svg.ivpse-icon-xl { width: 40px; height: 40px; display: block; margin: 0 auto 12px; color: #cbd5e1; }

/* SVG icon used inline inside text — keeps vertical alignment */
.ivpse-info-grid span svg.ivpse-icon-xs {
    display: inline;
    margin-right: 3px;
    vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════════
   20. AJUSTES FINALES v2.4 — Pulido Figma / compatibilidad WordPress
══════════════════════════════════════════════════════════════════════ */
.ivpse-wrap,
.ivpse-wrap input,
.ivpse-wrap button,
.ivpse-wrap select,
.ivpse-wrap textarea,
.ivpse-order-panel,
.ivpse-order-panel * {
    font-family: var(--ivp-font) !important;
}

.ivpse-wrap {
    isolation: isolate;
    letter-spacing: -0.01em;
}

.ivpse-card {
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.ivpse-order-card:hover,
.ivpse-stat-card:hover,
.ivpse-export-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(15,23,42,.08);
    border-color: rgba(31,122,224,.14);
}

.ivpse-btn {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ivpse-search-field {
    position: relative;
}

.ivpse-search-count {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--ivp-blue);
    background: var(--ivp-blue-bg);
    border: 1px solid var(--ivp-blue-border);
    border-radius: 999px;
    padding: 3px 8px;
    pointer-events: none;
}

.ivpse-search-field:has(.ivpse-search-count:not(:empty)) input {
    padding-right: 118px;
}

.ivpse-panel-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.ivpse-module-armado .ivp-control-operativo-envios,
.ivpse-module-armado [class*="ivp-fulfillment"],
.ivpse-module-armado [class*="ivp-panel-envio-control"] {
    font-family: var(--ivp-font) !important;
}

.ivpse-module-armado img {
    max-width: 100%;
    height: auto;
}

.ivpse-module-armado .button,
.ivpse-module-armado button,
.ivpse-module-monitor .button,
.ivpse-module-monitor button {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.ivpse-module-armado table,
.ivpse-module-monitor table {
    border-radius: 18px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.ivpse-hidden {
    display: none !important;
}


/* =========================================================
   v2.4.5 ROOT FIX — buscador, botones y panel pedido
   ========================================================= */

/* Buscador arreglado desde la fuente: input propio, no input[type=search] */
.ivpse-wrap .ivpse-search.ivpse-search-fixed {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 18px !important;
    overflow: visible !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-search-field {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-search-field > span {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-search-input {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 18px 0 46px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    outline: none !important;
    color: #0f172a !important;
    font-family: var(--ivp-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 46px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-search-input:focus {
    background: #ffffff !important;
    border-color: #1F7AE0 !important;
    box-shadow: 0 0 0 4px rgba(31,122,224,.12) !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-search-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-filter-btn {
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 17px !important;
    white-space: nowrap !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-date-pills {
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    flex: 0 0 auto !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-date-pills a {
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-date-pills a:hover,
.ivpse-wrap .ivpse-search-fixed .ivpse-date-pills a.is-active {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.08) !important;
}

/* Botones del panel principal */
.ivpse-wrap .ivpse-btn,
.ivpse-wrap a.ivpse-btn,
.ivpse-wrap button.ivpse-btn,
.ivpse-wrap .ivpse-link-action {
    border-radius: 999px !important;
    text-decoration: none !important;
}

.ivpse-wrap .ivpse-link-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 9px 18px !important;
    border: 1px solid #dbe3ee !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.ivpse-wrap .ivpse-link-action:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}

/* Botones del panel lateral, que está fuera de .ivpse-wrap */
.ivpse-order-panel .ivpse-btn,
.ivpse-order-panel a.ivpse-btn,
.ivpse-order-panel button.ivpse-btn,
.ivpse-panel-footer .ivpse-btn,
.ivpse-panel-footer a.ivpse-btn {
    border-radius: 999px !important;
    min-height: 40px !important;
    text-decoration: none !important;
}

/* Contraste correcto */
.ivpse-wrap .ivpse-btn-primary,
.ivpse-wrap a.ivpse-btn-primary,
.ivpse-wrap button.ivpse-btn-primary,
.ivpse-order-panel .ivpse-btn-primary,
.ivpse-order-panel a.ivpse-btn-primary,
.ivpse-panel-footer .ivpse-btn-primary {
    background: #1F7AE0 !important;
    border-color: #1F7AE0 !important;
    color: #ffffff !important;
}

.ivpse-wrap .ivpse-btn-primary:hover:not(:disabled),
.ivpse-wrap a.ivpse-btn-primary:hover,
.ivpse-wrap button.ivpse-btn-primary:hover:not(:disabled),
.ivpse-order-panel .ivpse-btn-primary:hover,
.ivpse-panel-footer .ivpse-btn-primary:hover {
    background: #1868C0 !important;
    border-color: #1868C0 !important;
    color: #ffffff !important;
}

.ivpse-wrap .ivpse-btn-secondary,
.ivpse-wrap a.ivpse-btn-secondary,
.ivpse-wrap button.ivpse-btn-secondary,
.ivpse-order-panel .ivpse-btn-secondary,
.ivpse-order-panel a.ivpse-btn-secondary,
.ivpse-panel-footer .ivpse-btn-secondary {
    background: #ffffff !important;
    border-color: #dbe3ee !important;
    color: #0f172a !important;
}

.ivpse-wrap .ivpse-btn-secondary:hover:not(:disabled),
.ivpse-wrap a.ivpse-btn-secondary:hover,
.ivpse-wrap button.ivpse-btn-secondary:hover:not(:disabled),
.ivpse-order-panel .ivpse-btn-secondary:hover,
.ivpse-panel-footer .ivpse-btn-secondary:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Panel pedido: que el contenido sí se lea */
.ivpse-order-panel .ivpse-panel-body {
    color: #0f172a !important;
}

.ivpse-order-panel .ivpse-panel-contact-row {
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

.ivpse-order-panel .ivpse-panel-product-row,
.ivpse-order-panel .ivpse-panel-shipment-grid {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.ivpse-order-panel .ivpse-panel-shipment-row {
    gap: 12px !important;
}

.ivpse-order-panel .ivpse-panel-shipment-row span:last-child {
    text-align: right !important;
    overflow-wrap: anywhere !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .ivpse-wrap .ivpse-search.ivpse-search-fixed {
        grid-template-columns: 1fr !important;
    }

    .ivpse-wrap .ivpse-search-fixed .ivpse-search-tools {
        justify-content: flex-start !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 640px) {
    .ivpse-wrap .ivpse-search-fixed .ivpse-search-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .ivpse-wrap .ivpse-search-fixed .ivpse-filter-btn {
        width: 100% !important;
    }

    .ivpse-wrap .ivpse-search-fixed .ivpse-date-pills {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        height: auto !important;
    }

    .ivpse-wrap .ivpse-search-fixed .ivpse-date-pills a {
        width: 100% !important;
    }
}


/* =========================================================
   v2.4.6 — corrección precisa del elemento que tapa el buscador
   El SVG del icono heredaba estilos del tema y se estiraba como línea.
   Ahora el icono es texto controlado y el input no muestra borde interno.
   ========================================================= */

.ivpse-wrap .ivpse-search-fixed .ivpse-search-field > span.ivpse-search-lens {
    position: absolute !important;
    left: 17px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: #94a3b8 !important;
    font-size: 18px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    pointer-events: none !important;
    z-index: 3 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-search-field > span.ivpse-search-lens::before,
.ivpse-wrap .ivpse-search-fixed .ivpse-search-field > span.ivpse-search-lens::after {
    display: none !important;
    content: none !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-search-field svg,
.ivpse-wrap .ivpse-search-fixed .ivpse-search-field svg *,
.ivpse-wrap .ivpse-search-fixed .ivpse-search-field path {
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    display: none !important;
    visibility: hidden !important;
}

.ivpse-wrap .ivpse-search-fixed .ivpse-search-input,
.ivpse-wrap .ivpse-search-fixed .ivpse-search-input:hover,
.ivpse-wrap .ivpse-search-fixed .ivpse-search-input:focus,
.ivpse-wrap .ivpse-search-fixed .ivpse-search-input:active {
    background-image: none !important;
    text-decoration: none !important;
    border-style: solid !important;
    outline: 0 !important;
}

/* El borde visible debe ser solo el pill externo del input, no una línea interna */
.ivpse-wrap .ivpse-search-fixed .ivpse-search-input {
    background-clip: padding-box !important;
}


/* =========================================================
   v2.4.7 — imagen de producto en Ver pedido
   ========================================================= */

.ivpse-order-panel .ivpse-panel-product-thumb {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

.ivpse-order-panel .ivpse-panel-product-thumb img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 4px !important;
    background: #ffffff !important;
}

.ivpse-order-panel .ivpse-panel-product-row {
    align-items: center !important;
    gap: 12px !important;
}


/* =========================================================
   v2.4.8 — Cards de eventos de error
   ========================================================= */

.ivpse-wrap .ivpse-order-card.is-error {
    position: relative !important;
    border-color: rgba(220, 38, 38, .18) !important;
    background:
        linear-gradient(180deg, rgba(254,242,242,.92), rgba(255,255,255,1) 34%) !important;
}

.ivpse-wrap .ivpse-order-card.is-error::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 22px !important;
    bottom: 22px !important;
    width: 4px !important;
    border-radius: 0 999px 999px 0 !important;
    background: linear-gradient(180deg, #ef4444, #f97316) !important;
}

.ivpse-wrap .ivpse-order-card.is-error .ivpse-badge-red {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
    box-shadow: 0 8px 18px rgba(190, 18, 60, .08) !important;
}

.ivpse-wrap .ivpse-error-event-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: flex-start !important;
    margin: 14px 0 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid #fecdd3 !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(254,202,202,.55), transparent 38%),
        linear-gradient(180deg, #fff7f7, #ffffff) !important;
    box-shadow: 0 12px 28px rgba(190, 18, 60, .08) !important;
}

.ivpse-wrap .ivpse-error-event-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #dc2626 !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65) !important;
}

.ivpse-wrap .ivpse-error-event-icon svg {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
}

.ivpse-wrap .ivpse-error-event-content {
    min-width: 0 !important;
}

.ivpse-wrap .ivpse-error-event-kicker {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin: 0 0 4px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #be123c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

.ivpse-wrap .ivpse-error-event-title {
    display: block !important;
    margin: 0 0 5px !important;
    color: #7f1d1d !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

.ivpse-wrap .ivpse-error-event-content p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

.ivpse-wrap .ivpse-error-event-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 10px !important;
}

.ivpse-wrap .ivpse-error-event-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 25px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

.ivpse-wrap .ivpse-order-card.is-error .ivpse-order-actions {
    margin-top: 14px !important;
}

.ivpse-wrap .ivpse-order-card.is-error .ivp-crear-guia.ivpse-btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(220,38,38,.16) !important;
}

.ivpse-wrap .ivpse-order-card.is-error .ivp-crear-guia.ivpse-btn-danger:hover:not(:disabled) {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

@media (max-width: 640px) {
    .ivpse-wrap .ivpse-error-event-card {
        grid-template-columns: 1fr !important;
    }

    .ivpse-wrap .ivpse-error-event-icon {
        width: 42px !important;
        height: 42px !important;
    }
}


/* v2.5.0 — transición interna de Armado */
.ivpse-module-armado{transition:opacity .16s ease;}


/* v2.5.1 — carga interna sin recargar página */
.ivpse-wrap.ivpse-panel-loading {
    opacity: .55;
    transition: opacity .16s ease;
}


/* v2.5.2 — carga AJAX real del panel completo */
.ivpse-wrap.ivpse-panel-loading {
    opacity: .58 !important;
    pointer-events: none !important;
    transition: opacity .14s ease !important;
}


/* =========================================================
   v2.5.5 — iconos reales en cards de métricas
   ========================================================= */
.ivpse-wrap .ivpse-stat-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
}

.ivpse-wrap .ivpse-stat-icon .dashicons {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
    line-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ivpse-wrap .ivpse-stat-icon svg {
    display: none !important;
}


/* =========================================================
   v2.6.3 — botón Ver pedido redondeado
   ========================================================= */
.ivpse-wrap .ivpse-view-order,
.ivpse-wrap .ivpse-order-actions .ivpse-view-order,
.ivpse-wrap .ivpse-order-actions a.ivpse-view-order,
.ivpse-wrap .ivpse-order-actions button.ivpse-view-order {
    border-radius: 999px !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 800 !important;
}

.ivpse-wrap .ivpse-view-order:hover,
.ivpse-wrap .ivpse-order-actions .ivpse-view-order:hover {
    border-radius: 999px !important;
}


/* =========================================================
   v2.6.5 — Monitoreo loader fix
   ========================================================= */
.ivpse-monitor-loader-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.ivpse-monitor-loader {
    transition: opacity .18s ease;
}


/* =========================================================
   v2.6.6 — Buscador final tipo cápsula
   Se elimina el buscador anterior: sin SVG, sin icono y sin borde interno.
   ========================================================= */

.ivpse-wrap .ivpse-search-clean {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 18px !important;
    overflow: visible !important;
}

/* Ocultar cualquier residuo del buscador anterior */
.ivpse-wrap .ivpse-search-clean svg,
.ivpse-wrap .ivpse-search-clean .ivpse-search-lens,
.ivpse-wrap .ivpse-search-clean .ivpse-icon-md,
.ivpse-wrap .ivpse-search-clean .ivpse-search-field,
.ivpse-wrap .ivpse-search-clean .ivpse-search-field > span {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Cápsula externa única */
.ivpse-wrap .ivpse-search-capsule {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
    overflow: hidden !important;
}

/* Input limpio: sin borde, sin outline, sin franja azul */
.ivpse-wrap .ivpse-search-clean-input,
.ivpse-wrap .ivpse-search-clean-input:hover,
.ivpse-wrap .ivpse-search-clean-input:focus,
.ivpse-wrap .ivpse-search-clean-input:active {
    all: unset !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    line-height: 48px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    color: #0f172a !important;
    font-family: var(--ivp-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.ivpse-wrap .ivpse-search-clean-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* El foco va solo en la cápsula completa */
.ivpse-wrap .ivpse-search-capsule:focus-within {
    border-color: #1F7AE0 !important;
    box-shadow: 0 0 0 4px rgba(31, 122, 224, .12) !important;
}

/* Acciones a la derecha */
.ivpse-wrap .ivpse-search-clean-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: max-content !important;
}

.ivpse-wrap .ivpse-search-clean .ivpse-filter-btn {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

.ivpse-wrap .ivpse-search-clean .ivpse-date-pills {
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    margin: 0 !important;
}

.ivpse-wrap .ivpse-search-clean .ivpse-date-pills a {
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ivpse-wrap .ivpse-search-clean .ivpse-date-pills a:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}

@media (max-width: 1100px) {
    .ivpse-wrap .ivpse-search-clean {
        grid-template-columns: 1fr !important;
    }

    .ivpse-wrap .ivpse-search-clean-actions {
        justify-content: flex-start !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 640px) {
    .ivpse-wrap .ivpse-search-clean-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .ivpse-wrap .ivpse-search-clean .ivpse-filter-btn {
        width: 100% !important;
    }

    .ivpse-wrap .ivpse-search-clean .ivpse-date-pills {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        height: auto !important;
    }

    .ivpse-wrap .ivpse-search-clean .ivpse-date-pills a {
        width: 100% !important;
    }
}


/* =========================================================
   v2.6.7 — quitar franja “X resultados en esta búsqueda”
   ========================================================= */
.ivpse-wrap .ivpse-search-results,
.ivpse-wrap .ivpse-search-status,
.ivpse-wrap .ivpse-search-count,
.ivpse-wrap [data-ivpse-search-results],
.ivpse-wrap [data-ivpse-search-status],
.ivpse-wrap [aria-live][class*="search"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Evita que cualquier pseudo-elemento del buscador pinte una línea/franja */
.ivpse-wrap .ivpse-search-clean::before,
.ivpse-wrap .ivpse-search-clean::after,
.ivpse-wrap .ivpse-search-capsule::before,
.ivpse-wrap .ivpse-search-capsule::after,
.ivpse-wrap .ivpse-search-clean-input::before,
.ivpse-wrap .ivpse-search-clean-input::after {
    content: none !important;
    display: none !important;
}