/* === Lista de chats "Claro y aireado" (solo tema Tradicional Dekoor) ===
   Misma estructura y mismos filtros; solo cambia el aspecto: panel blanco, filas redondeadas
   con más aire, buscador con lupa, filtros en chips y etiquetas suaves.
   La altura de la fila (72px) debe coincidir con VS_ITEM_HEIGHT en js/modules/virtual-scroll.js. */

body.theme-dekoor {
    --cm-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --cm-ink: #16212B;
    --cm-muted: #5B6875;
    --cm-line: #E6E8EC;
    --cm-soft: #F4F5F7;
    --cm-accent: #C84B11;        /* naranja de marca con contraste AA sobre blanco */
    --cm-accent-soft: #FDE9DD;
    --cm-accent-ink: #9A3A0D;
    --cm-navy: #14313F;
}

/* --- Encabezado superior --- */
body.theme-dekoor #app-header { box-shadow: none; border-bottom: 1px solid var(--cm-line); }
body.theme-dekoor #app-header h1 { font-family: var(--cm-font); font-weight: 800; letter-spacing: -0.02em; }
body.theme-dekoor .orders-badge { border-radius: 999px; background: var(--cm-navy); color: #fff; border: 0; font-family: var(--cm-font); font-weight: 700; }

/* --- Panel de contactos --- */
body.theme-dekoor #contacts-panel { background: #fff; border-right: 1px solid var(--cm-line); font-family: var(--cm-font); }
body.theme-dekoor #contacts-panel > .p-4 { padding: 18px 16px 10px; border-bottom: 0; }
body.theme-dekoor #search-contacts-input {
    height: 44px; border-radius: 12px; border: 1px solid transparent; background-color: var(--cm-soft);
    padding-left: 42px; font-family: var(--cm-font); font-size: 14px; color: var(--cm-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6875' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM20 20l-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 14px center;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.theme-dekoor #search-contacts-input::placeholder { color: var(--cm-muted); }
body.theme-dekoor #search-contacts-input:focus { background-color: #fff; border-color: var(--cm-accent); box-shadow: 0 0 0 3px rgba(200, 75, 17, .14); outline: none; }

/* Filtros: chips alineados a la izquierda, el activo en naranja suave */
body.theme-dekoor #tag-filters-container { justify-content: flex-start; gap: 6px; padding: 4px 16px 14px; border-bottom: 1px solid var(--cm-line); background: #fff; }
body.theme-dekoor .filter-btn {
    height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
    background: #fff; color: #3B4652; border: 1px solid #E1E4E9; font-family: var(--cm-font); font-size: 12px; font-weight: 600;
}
body.theme-dekoor .filter-btn:hover { background: var(--cm-soft); border-color: #D5D9DF; }
body.theme-dekoor .filter-btn.active { background: var(--cm-accent-soft); color: var(--cm-accent-ink); border-color: #F6C7AA; }
body.theme-dekoor .filter-btn.filter-channel { width: 30px; padding: 0; justify-content: center; }
body.theme-dekoor #tag-filters-container .bg-blue-500,
body.theme-dekoor #tag-filters-container [class*="badge"] { border-radius: 999px; }

/* --- Filas --- */
body.theme-dekoor #contacts-list { padding: 6px 0; }
body.theme-dekoor .contact-item {
    left: 8px !important; right: 8px !important; height: 72px;
    padding: 10px 12px; border-left: 0; border-radius: 14px; background: transparent;
}
body.theme-dekoor .contact-item:hover { background-color: var(--cm-soft); }
body.theme-dekoor .contact-item.selected,
body.theme-dekoor .contact-item.selected:hover { background-image: none; background-color: #FFF4EC; box-shadow: inset 0 0 0 1px #F6D3BC; }
body.theme-dekoor .contact-item.selected h3, body.theme-dekoor .contact-item.selected p { color: inherit !important; }
body.theme-dekoor .contact-item.selected .fas, body.theme-dekoor .contact-item.selected .far { color: inherit !important; }

/* Avatar más grande */
body.theme-dekoor .contact-item > .rounded-full:first-child { width: 46px; height: 46px; }
body.theme-dekoor .contact-item > .flex-grow { margin-left: 12px; display: flex; flex-direction: column; gap: 4px; }

body.theme-dekoor .contact-item h3 { font-size: 14px; font-weight: 700; color: var(--cm-ink); letter-spacing: -0.005em; }
body.theme-dekoor .contact-item p.text-xs { font-size: 13px; color: var(--cm-muted); }
body.theme-dekoor .contact-time-label { font-size: 11px; font-weight: 600; color: var(--cm-muted); font-variant-numeric: tabular-nums; }

body.theme-dekoor .unread-badge,
body.theme-dekoor .contact-item.selected .unread-badge {
    background: var(--cm-accent); color: #fff; box-shadow: none; border-radius: 999px;
    min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; margin-left: 6px;
}
/* Con no leídos, la hora también va en naranja (el badge va justo después de la hora) */
body.theme-dekoor .contact-time-label:has(+ .unread-badge) { color: var(--cm-accent); }

body.theme-dekoor .order-badge {
    background: var(--cm-soft); color: var(--cm-muted); border: 0; border-radius: 6px;
    font-size: 11px; font-weight: 600; padding: 3px 7px; font-variant-numeric: tabular-nums;
}
/* Venta por Mercado Libre (amarillo de ML): junto al folio en la lista y en el historial del contacto */
.ml-badge {
    display: inline-block; vertical-align: middle; margin-left: 4px;
    background: #ffe600; color: #2d3277; border-radius: 4px;
    font-size: 10px; font-weight: 800; line-height: 1.5; padding: 0 5px;
}
/* Motivo que dio Leonel al pedir ayuda (/equipo: motivo), justo debajo del encabezado del chat */
.attn-motivo-bar {
    background: #FFE2CF; color: #7a3410; border-bottom: 1px solid #F2A26B;
    font-size: 13px; line-height: 1.4; padding: 6px 14px;
}
body.theme-dekoor .dp-badges-wrap { gap: 5px; }
body.theme-dekoor .dp-badge { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; border-color: transparent !important; }

/* Necesita atención: durazno fuerte que late + etiqueta naranja sólida (opción A, 26-oct: el durazno
   muy claro casi no resaltaba en la lista) */
body.theme-dekoor .contact-item.needs-attention { border-left: 0; animation: cm-attn 1.6s ease-in-out infinite; }
body.theme-dekoor .contact-item.needs-attention.selected { animation: none; background-color: #FFD9C2; box-shadow: inset 0 0 0 1px #F2A26B; }
body.theme-dekoor .dp-badge.attn-badge { background: var(--cm-accent) !important; color: #fff !important; border-color: transparent !important; }
@keyframes cm-attn {
    0%, 100% { background-color: #FFE2CF; }
    50% { background-color: #FFD2B5; }
}

body.theme-dekoor .contact-item .preview-icon:hover { background-color: #E9ECF0; color: var(--cm-ink); }

/* ================= Resto de la pantalla (mismo estilo, misma estructura) ================= */

body.theme-dekoor { --color-bg: #F4F5F7; font-family: var(--cm-font); }
body.theme-dekoor h1, body.theme-dekoor h2, body.theme-dekoor h3 { font-family: var(--cm-font); }

/* --- Menú lateral: blanco, iconos grises, activo en naranja suave --- */
body.theme-dekoor #main-sidebar { background: #fff; border-right: 1px solid var(--cm-line); padding: 14px 12px; }
body.theme-dekoor .nav-item { color: #3B4652; border-radius: 12px; margin-bottom: 4px; padding: 11px 14px; font-weight: 600; }
body.theme-dekoor .nav-item i { color: var(--cm-muted); opacity: 1; }
body.theme-dekoor .nav-item:hover { background: var(--cm-soft); color: var(--cm-ink); }
body.theme-dekoor .nav-item:hover i { color: var(--cm-ink); opacity: 1; }
body.theme-dekoor .nav-item.active { background: var(--cm-accent-soft); color: var(--cm-accent-ink); }
body.theme-dekoor .nav-item.active i { color: var(--cm-accent); opacity: 1; }
body.theme-dekoor #main-sidebar.collapsed .nav-item { width: 48px; height: 48px; padding: 0; margin-left: auto; margin-right: auto; border-radius: 14px; }
body.theme-dekoor .nav-section-title { color: #8A95A1; font-weight: 700; }
body.theme-dekoor .nav-divider { background: var(--cm-line); }
body.theme-dekoor .sidebar-user-avatar { background: var(--cm-accent-soft); color: var(--cm-accent-ink); font-weight: 700; }
body.theme-dekoor .sidebar-user-name { color: var(--cm-ink); }
body.theme-dekoor .sidebar-theme-btn { color: var(--cm-muted); }
body.theme-dekoor .sidebar-theme-btn:hover { background: var(--cm-soft); color: var(--cm-ink); }
body.theme-dekoor #main-sidebar > nav:hover { scrollbar-color: rgba(0,0,0,0.15) transparent; }
body.theme-dekoor #main-sidebar > nav:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* --- Encabezado: blanco, contadores como pastillas --- */
body.theme-dekoor #app-header { background: #fff; padding: 12px 20px; }
body.theme-dekoor #app-header h1 { color: var(--cm-ink); font-size: 20px; }
body.theme-dekoor #tag-sidebar-toggle { width: 40px; height: 40px; border-radius: 12px; color: var(--cm-muted); display: inline-grid; place-items: center; font-size: 17px; }
body.theme-dekoor #tag-sidebar-toggle:hover { background: var(--cm-soft); color: var(--cm-ink); }
body.theme-dekoor #traffic-badge,
body.theme-dekoor #openrouter-badge {
    height: 32px; padding: 0 12px !important; border-radius: 999px !important; display: inline-flex; align-items: center;
    background: #fff !important; border: 1px solid var(--cm-line) !important; color: #3B4652 !important; font-size: 12px !important; font-weight: 600 !important;
}
body.theme-dekoor #traffic-timer { color: var(--cm-muted) !important; font-size: 12px !important; font-weight: 600 !important; margin-left: 0 !important; }
body.theme-dekoor .orders-badge { height: 32px; min-width: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

/* --- Panel del chat: fondo liso claro, sin el tapiz de WhatsApp --- */
body.theme-dekoor #chat-panel { background: var(--cm-soft); }
body.theme-dekoor #chat-panel::before { display: none; }

/* Estado vacío */
body.theme-dekoor .chat-empty-state { background: transparent !important; color: var(--cm-muted); gap: 6px; }
body.theme-dekoor .chat-empty-state i {
    font-size: 40px !important; width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center;
    background: #fff; border: 1px solid var(--cm-line); color: var(--cm-accent) !important; margin-bottom: 18px !important;
}
body.theme-dekoor .chat-empty-state h2 { font-size: 22px; font-weight: 800; color: var(--cm-ink); letter-spacing: -0.01em; }
body.theme-dekoor .chat-empty-state p { font-size: 14px; color: var(--cm-muted); }

/* Encabezado del chat abierto */
body.theme-dekoor .chat-header,
body.theme-dekoor .chat-header-slim { background: #fff; border-bottom: 1px solid var(--cm-line); padding: 10px 16px; }
body.theme-dekoor .chat-header-slim .chat-header-avatar .dekoor-avatar,
body.theme-dekoor .chat-header-slim .chat-header-avatar img,
body.theme-dekoor .chat-header-slim .chat-header-avatar > div { width: 40px; height: 40px; }
body.theme-dekoor .chat-header-title h2 { font-size: 15px; font-weight: 800; color: var(--cm-ink); }
body.theme-dekoor .chat-header-actions button { border-radius: 10px; }
body.theme-dekoor .chat-header-actions button:hover { background: var(--cm-soft); }

/* Burbujas */
body.theme-dekoor .message-bubble { border-radius: 16px; padding: 8px 13px; box-shadow: 0 1px 2px rgba(20, 49, 63, 0.06); line-height: 1.45; }
body.theme-dekoor .message-bubble.received { background: #fff; color: var(--cm-ink); border-bottom-left-radius: 6px; }
body.theme-dekoor .message-bubble.sent { background: #FDEBDF; color: var(--cm-ink); border-bottom-right-radius: 6px; }

/* Barra para escribir */
body.theme-dekoor .chat-footer { background: #fff; border-top: 1px solid var(--cm-line); padding: 10px 16px; }
body.theme-dekoor #message-input { background: var(--cm-soft); border: 1px solid transparent; border-radius: 14px; font-family: var(--cm-font); font-size: 14px; color: var(--cm-ink); }
body.theme-dekoor #message-input:focus { background: #fff; border-color: var(--cm-accent); box-shadow: 0 0 0 3px rgba(200, 75, 17, .14); }
body.theme-dekoor .chat-icon-btn { border-radius: 10px; color: var(--cm-muted); }
body.theme-dekoor .chat-icon-btn:hover { color: var(--cm-accent); }

/* Panel de detalles del cliente */
body.theme-dekoor #contact-details-panel { background: #fff; border-left: 1px solid var(--cm-line); }
/* Plantillas y programados dentro de una burbuja enviada clara: texto oscuro (las reglas base asumen burbuja oscura) */
body.theme-dekoor .message-bubble.sent .template-footer { color: var(--cm-muted); border-top-color: rgba(154, 58, 13, .15); }
body.theme-dekoor .message-bubble.sent .template-buttons { border-top-color: rgba(154, 58, 13, .15); }
body.theme-dekoor .message-bubble.sent .template-button { background: rgba(255, 255, 255, .7); color: var(--cm-accent-ink); }
body.theme-dekoor .message-bubble.sent .template-button-url:hover,
body.theme-dekoor .message-bubble.sent .template-button-phone:hover { background: #fff; }
body.theme-dekoor .message-bubble.sent .scheduled-badge { color: #6D28D9; border-top-color: rgba(109, 40, 217, .2); }

/* ================= Pulido (captura del 22-oct) ================= */

/* Contadores del encabezado: el JS los muestra con display:inline-block, así que se centran con line-height */
body.theme-dekoor #traffic-badge,
body.theme-dekoor #openrouter-badge { line-height: 30px !important; height: 32px; box-sizing: border-box; vertical-align: middle; }
body.theme-dekoor #traffic-timer { line-height: 32px; vertical-align: middle; }

/* Fila abierta: la hora en gris legible (la regla base la pintaba blanca sobre el durazno) */
body.theme-dekoor .contact-item.selected .contact-time-label { color: var(--cm-muted); }
body.theme-dekoor .contact-item.selected .contact-time-label:has(+ .unread-badge) { color: var(--cm-accent); }

/* --- Panel de detalles del cliente --- */
body.theme-dekoor #contact-details-panel header { border-bottom: 1px solid var(--cm-line) !important; padding: 16px 18px; }
body.theme-dekoor #contact-details-panel header h3 { font-size: 16px; font-weight: 800; color: var(--cm-ink); }
body.theme-dekoor #contact-details-panel header button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--cm-muted); }
body.theme-dekoor #contact-details-panel header button:hover { background: var(--cm-soft); color: var(--cm-ink); }

/* Pestañas como control segmentado: pista gris, activa en blanco */
body.theme-dekoor .cdetails-tabs { border-bottom: 0; margin: 12px 14px 4px; padding: 4px; gap: 4px; background: var(--cm-soft); border-radius: 12px; }
body.theme-dekoor .cdetails-tab { border-bottom: 0; border-radius: 9px; padding: 7px 4px; color: var(--cm-muted); font-size: 11px; font-family: var(--cm-font); }
body.theme-dekoor .cdetails-tab i { font-size: 15px; }
body.theme-dekoor .cdetails-tab:hover { color: var(--cm-ink); }
body.theme-dekoor .cdetails-tab.active { background: #fff; color: var(--cm-ink); box-shadow: 0 1px 3px rgba(20, 49, 63, .12); }
body.theme-dekoor .cdetails-tab.active i { color: var(--cm-accent); }
body.theme-dekoor .cdetails-tab-badge { background: var(--cm-accent); }

/* Tarjetas del perfil */
body.theme-dekoor .cdetails-pane h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--cm-ink); }
body.theme-dekoor .pending-ai-toggle { border-radius: 14px; border-color: var(--cm-line); padding: 12px 14px; font-family: var(--cm-font); }
body.theme-dekoor .pending-ai-toggle:hover { background: var(--cm-soft); border-color: #D5D9DF; color: var(--cm-ink); }
body.theme-dekoor .pending-ai-toggle.active { background: var(--cm-accent-soft); border-color: #F6C7AA; color: var(--cm-accent-ink); }
body.theme-dekoor .andrea-note-box { border: 1px solid var(--cm-line) !important; background: var(--cm-soft) !important; border-radius: 14px !important; padding: 14px !important; }
body.theme-dekoor .andrea-note-box .fa-robot { color: var(--cm-accent) !important; }
body.theme-dekoor .andrea-note-box p { color: var(--cm-muted); }
body.theme-dekoor #andrea-note-input { background: #fff; border-color: var(--cm-line) !important; border-radius: 10px; font-family: var(--cm-font); padding: 8px 10px; }
body.theme-dekoor #andrea-note-input:focus { border-color: var(--cm-accent) !important; box-shadow: 0 0 0 3px rgba(200, 75, 17, .14); }
body.theme-dekoor .andrea-note-box .btn-primary { background: var(--cm-accent); border-color: var(--cm-accent); border-radius: 9px !important; }
body.theme-dekoor .ad-referral-banner { border-radius: 14px; overflow: hidden; border: 1px solid var(--cm-line); }

/* Botones genéricos dentro del chat y del panel */
body.theme-dekoor #chat-view .btn { border-radius: 10px; font-family: var(--cm-font); }