/* ============================================================
   InventoryKill — Theme v2 (público / comprador)
   Nueva imagen visual para todo el sitio público y el panel de comprador,
   EXCLUYENDO el panel del vendedor (que mantiene su skin DashLite actual).
   Estructura y colores existentes se mantienen (carbón #1D2530, bronce
   #AB733C/#CD9765) — solo cambian fuentes, radios, sombras, inputs, botones
   y transiciones, tomando como referencia los patrones de Zunospend.
   ============================================================ */

:root {
    --ik-radius: 0.75rem;      /* 12px, tarjetas */
    --ik-radius-sm: 10px;       /* inputs */
    --ik-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --ik-glow: rgba(171, 115, 60, 0.14);   /* halo de foco, basado en #AB733C */
    --ik-shadow-soft: 0 2px 10px rgba(29, 37, 48, 0.06);
    --ik-shadow-lift: 0 10px 30px rgba(29, 37, 48, 0.12), 0 3px 10px rgba(0,0,0,.06);
}

/* ─── Tipografía: Manrope (headings) + Inter (cuerpo), reemplaza Roboto ─── */
body:not(.admin-skin) {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.font-headline, #main-header, .acct-head-info h1, .bp-side-card h4,
.pd-description-header, .footer--col h4 {
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

/* ─── Scroll suave + scrollbar delgada en todo el sitio público ─── */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d9cbb5; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #AB733C; }

/* ─── Inputs / selects / textareas: bordes más suaves + halo de foco cálido ─── */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
    border-radius: var(--ik-radius-sm) !important;
    border-color: #e2e2e8 !important;
    transition: border-color var(--ik-transition), box-shadow var(--ik-transition) !important;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
    border-color: #AB733C !important;
    box-shadow: 0 0 0 3px var(--ik-glow) !important;
    outline: none !important;
}

/* ─── Tarjetas: radio consistente + sombra suave + leve elevación al pasar el mouse ─── */
.acct-card, .acct-info-item, .acct-related-item, .bp-side-card, .bp-stat, .bp-order-pills span,
.mk-card, .pd-description-container, .pd-supplier-mini, .pd-supplier-stats, .pd-supplier-trust-row,
.pd-variants-box, .quote-modal, .cat-mobile-sheet--panel {
    border-radius: var(--ik-radius) !important;
}
.mk-card { transition: transform var(--ik-transition), box-shadow var(--ik-transition); }
.mk-card:hover { transform: translateY(-3px); box-shadow: var(--ik-shadow-lift); }

/* ─── Botones: transición suave + leve "press" al hacer click ─── */
.pd-btn, .mk-btn, .chat-send-btn, .acct-btn-dark, .quote-modal-submit,
.pd-supplier-card-btn, .buyer-auth-submit {
    transition: transform 0.12s ease, box-shadow var(--ik-transition), opacity var(--ik-transition) !important;
}
.pd-btn:active, .mk-btn:active, .acct-btn-dark:active, .quote-modal-submit:active,
.buyer-auth-submit:active {
    transform: scale(.97);
}

/* ─── Modales: fondo con blur + sombra por capas, igual patrón que Zunospend ─── */
.modal-overlay, .quote-modal-overlay::before, .cat-mobile-sheet--overlay, .authprompt-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.quote-modal, .cat-mobile-sheet--panel {
    box-shadow: 0 -12px 50px rgba(29,37,48,.22), 0 4px 16px rgba(0,0,0,.1) !important;
}

/* ─── Tooltips discretos (title-like) para elementos con data-tooltip ─── */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #1D2530; color: #fff; padding: 4px 10px; border-radius: 6px;
    font-size: 11px; white-space: nowrap; z-index: 80; pointer-events: none;
}

/* ─── Entrada de página suave (contenido principal aparece con fade+slide) ─── */
body:not(.admin-skin) main, body:not(.admin-skin) .buyer-page-wrap, .pd-wrap, .mk-grid {
    animation: ikThemeEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ikThemeEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Aparición escalonada de tarjetas de producto en grillas ─── */
.mk-grid .mk-card, .product-random-list--container .product-random-list--item {
    opacity: 0; animation: ikStaggerIn 0.4s ease forwards;
}
.mk-grid .mk-card:nth-child(1), .product-random-list--item:nth-child(1) { animation-delay: .03s; }
.mk-grid .mk-card:nth-child(2), .product-random-list--item:nth-child(2) { animation-delay: .06s; }
.mk-grid .mk-card:nth-child(3), .product-random-list--item:nth-child(3) { animation-delay: .09s; }
.mk-grid .mk-card:nth-child(4), .product-random-list--item:nth-child(4) { animation-delay: .12s; }
.mk-grid .mk-card:nth-child(5), .product-random-list--item:nth-child(5) { animation-delay: .15s; }
.mk-grid .mk-card:nth-child(6), .product-random-list--item:nth-child(6) { animation-delay: .18s; }
@keyframes ikStaggerIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Botón con estado "cargando" (spinner reemplaza el texto) ─── */
.ik-btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.ik-btn-loading::after {
    content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
    border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
    animation: ikSpin .6s linear infinite;
}
@keyframes ikSpin { to { transform: rotate(360deg); } }