.banner-breadcrumb .breadcrumb {
        margin: 0;
        padding: 0;
        background: transparent;
        flex-wrap: wrap;
        gap: 4px;
    }
    .banner-breadcrumb .breadcrumb-item {
        padding: 0;
    }
    .banner-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        display: none;
    }
    .banner-breadcrumb .breadcrumb-item a,
    .banner-breadcrumb .breadcrumb-item.active {
        color: #fff;
        font-size: 0.7rem;
        padding: 3px 10px;
        border-radius: 8px;
        backdrop-filter: blur(4px);
        text-decoration: none;
        display: inline-block;
    }
    .banner-breadcrumb .breadcrumb-item:nth-child(odd) a,
    .banner-breadcrumb .breadcrumb-item:nth-child(odd).active {
        background: rgba(197, 33, 16, 0.4);
        border: 1px solid rgba(197, 33, 16, 0.6);
    }
    .banner-breadcrumb .breadcrumb-item:nth-child(even) a,
    .banner-breadcrumb .breadcrumb-item:nth-child(even).active {
        background: rgba(88, 16, 197, 0.4);
        border: 1px solid rgba(88, 16, 197, 0.6);
    }
    .banner-breadcrumb .breadcrumb-item.active {
        opacity: 0.85;
    }


/* =============================================
    BANNER
    ============================================= */
.stock-banner {
position: relative;
background: linear-gradient(135deg, #C52110 0%, #333 50%, #5810c5 100%);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.35),
            0 2px 8px rgba(197,33,16,0.25),
            -5px 0 0 0 rgba(88,16,197,0.9);
overflow: hidden;
min-height: 90px;
margin: 0.75rem 1rem 0 1rem;
padding: 1rem 1.5rem;
}
.stock-banner::before {
content: '';
position: absolute;
top: -20px; left: -20px;
width: 100px; height: 100px;
background: rgba(197,33,16,0.4);
border-radius: 50%;
filter: blur(30px);
pointer-events: none; z-index: 0;
}
.stock-banner-inner {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 0.85rem;
}
.chat-banner-avatar {
width: 44px; height: 44px; border-radius: 10px;
overflow: hidden; flex-shrink: 0;
border: 2px solid rgba(255,255,255,0.4);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.chat-banner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.stock-banner h1 {
color: #fff; font-size: 1.1rem; font-weight: 700; margin: 0 0 0.1rem 0;
text-shadow: 1px 0 0 rgba(0,0,0,0.3), -1px 0 0 rgba(0,0,0,0.3),
                0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(0,0,0,0.3);
}
.chat-banner-sub {
color: rgba(255,255,255,0.7); font-size: 0.72rem;
display: flex; align-items: center; gap: 0.3rem;
}
.chat-status-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #4cff8a;
box-shadow: 0 0 6px rgba(76,255,138,0.7);
display: inline-block;
}

/* =============================================
    CHAT CONTAINER
    ============================================= */
.chat-wrapper {
margin: 1rem 1rem 0 1rem;
display: flex;
flex-direction: column;
height: calc(100vh - 220px);
min-height: 400px;
background: #fff;
border-radius: 16px;
box-shadow: 0 .15rem 1.75rem rgba(33,40,50,0.12);
overflow: hidden;
}

/* Mensajes */
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1.25rem 1.25rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
background: #f7f6fb;
scrollbar-width: thin;
scrollbar-color: #d4aaff transparent;
}
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-thumb { background: #d4aaff; border-radius: 10px; }

/* Burbujas */
.message {
display: flex;
align-items: flex-end;
gap: 0.5rem;
max-width: 72%;
}

.message.other-message { align-self: flex-start; }
.message.my-message    { align-self: flex-end; flex-direction: row-reverse; }

/* Avatar del otro usuario */
.msg-avatar {
width: 32px; height: 32px; border-radius: 8px;
overflow: hidden; flex-shrink: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Burbuja */
.bubble {
padding: 0.6rem 0.9rem;
border-radius: 14px;
font-size: 0.85rem;
line-height: 1.5;
word-break: break-word;
position: relative;
}

.other-message .bubble {
background: #fff;
color: #2d2d2d;
border-bottom-left-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.my-message .bubble {
background: linear-gradient(135deg, #5810c5, #7a30e0);
color: #fff;
border-bottom-right-radius: 4px;
box-shadow: 0 2px 10px rgba(88,16,197,0.3);
}

.bubble .timestamp {
font-size: 0.6rem;
margin-top: 0.3rem;
opacity: 0.6;
text-align: right;
}

.bubble .message-img {
display: block;
max-width: 200px;
border-radius: 8px;
margin-top: 0.4rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Separador de fecha */
.date-separator {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0.5rem 0;
color: #aaa;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06rem;
}
.date-separator::before, .date-separator::after {
content: ''; flex: 1; height: 1px; background: #e0e0e0;
}

/* Typing indicator */
.typing-indicator {
display: flex; align-items: center; gap: 0.3rem;
padding: 0.4rem 0.75rem;
background: #fff;
border-radius: 14px;
border-bottom-left-radius: 4px;
width: fit-content;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
opacity: 0; transition: opacity 0.2s;
}
.typing-indicator.visible { opacity: 1; }
.typing-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #5810c5; animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-5px); opacity: 1; }
}

/* =============================================
    INPUT
    ============================================= */
.chat-input-bar {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1rem;
background: #fff;
border-top: 1px solid rgba(0,0,0,0.06);
}

.chat-input-bar input {
flex: 1;
padding: 0.55rem 1rem;
border-radius: 24px;
border: 1.5px solid #e0e0e0;
font-size: 0.85rem;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
background: #f7f6fb;
}
.chat-input-bar input:focus {
border-color: #5810c5;
box-shadow: 0 0 0 3px rgba(88,16,197,0.1);
background: #fff;
}

.chat-send-btn {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #5810c5, #7a30e0);
border: none;
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(88,16,197,0.3);
transition: transform 0.15s, filter 0.15s;
}
.chat-send-btn:hover { transform: scale(1.08); filter: brightness(1.1); }
.chat-send-btn i { font-size: 0.9rem; }

/* Mensaje leído */
.my-message.read .bubble::after {
content: '✓✓';
font-size: 0.55rem;
position: absolute;
bottom: 4px; right: 6px;
color: rgba(255,255,255,0.6);
}

/* =============================================
    BANNER
    ============================================= */
.stock-banner {
position: relative;
background: linear-gradient(135deg, #C52110 0%, #333 50%, #5810c5 100%);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.35),
            0 2px 8px rgba(197,33,16,0.25),
            -5px 0 0 0 rgba(88,16,197,0.9);
overflow: hidden;
min-height: 110px;
margin: 0.75rem 1rem 0 1rem;
padding: 1.25rem 1.5rem;
}
.stock-banner::before {
content: '';
position: absolute;
top: -20px; left: -20px;
width: 100px; height: 100px;
background: rgba(197,33,16,0.4);
border-radius: 50%;
filter: blur(30px);
pointer-events: none;
z-index: 0;
}
.stock-banner-badge {
position: absolute; top: 12px; right: 12px; z-index: 2;
background: rgba(255,255,255,0.15); color: #fff;
font-size: 0.7rem; padding: 3px 10px; border-radius: 8px;
backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2);
}
.stock-banner-inner {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 0.75rem;
}
.stock-banner-icon {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(4px);
border-radius: 8px; width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.stock-banner-icon i { color: #fff; font-size: 1rem; }
.stock-banner h1 {
color: #fff; font-size: 1.3rem; font-weight: 700; margin: 0;
text-shadow: 1px 0 0 rgba(0,0,0,0.3), -1px 0 0 rgba(0,0,0,0.3),
                0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(0,0,0,0.3);
}

/* =============================================
    LISTA DE CONVERSACIONES
    ============================================= */
.chat-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 1.25rem 1rem 2rem;
}

.chat-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.9rem 1.1rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 .15rem 1.75rem rgba(33,40,50,0.1);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: transform 0.18s, box-shadow 0.18s;
border-left: 4px solid transparent;
}

.chat-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, #5810c5, #C52110);
border-radius: 12px 0 0 12px;
opacity: 0;
transition: opacity 0.18s;
}

.chat-card:hover {
transform: translateY(-2px);
box-shadow: 0 .5rem 2rem rgba(0,0,0,0.13);
color: inherit;
}

.chat-card:hover::before { opacity: 1; }

/* Avatar */
.chat-card .cr-avatar {
width: 48px; height: 48px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
background: #f0ebff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.chat-card .cr-avatar img {
width: 100%; height: 100%;
object-fit: cover;
}

/* Info central */
.chat-card .cr-info { flex: 1; min-width: 0; }

.chat-card .cr-user {
font-size: 0.85rem; font-weight: 700; color: #2d2d2d;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: 0.2rem;
}

.chat-card .cr-order {
font-size: 0.72rem; color: #9a9a9a; font-weight: 600;
display: flex; align-items: center; gap: 0.3rem;
}

.chat-card .cr-order i { color: #5810c5; font-size: 0.7rem; }

/* Badge no leídos */
.cr-unread {
background: linear-gradient(135deg, #C52110, #e03030);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
min-width: 20px; height: 20px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 5px;
box-shadow: 0 2px 6px rgba(197,33,16,0.3);
}

/* Flecha */
.chat-card .cr-arrow {
color: #ccc; font-size: 0.85rem;
transition: color 0.18s, transform 0.18s;
flex-shrink: 0;
}
.chat-card:hover .cr-arrow { color: #5810c5; transform: translateX(3px); }

/* Empty state */
.chat-empty {
text-align: center;
padding: 3rem 1rem;
color: #aaa;
margin: 1rem;
}
.chat-empty i { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; color: #ddd; }
.chat-empty p { font-size: 0.9rem; }