/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 30 2026 | 16:07:16 */
/* =========================
   FUENTE GLOBAL
========================= */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300&display=swap'); 
/*@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('https://chat.datatime-bi.com/fonts/fira-sans-condensed-300.woff2') format('woff2')
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}*/


/* Forzar Fira Sans en todo el chatbot */
#wp-chatbot-chat-container,
#wp-chatbot-chat-container *:not(.dashicons) {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-weight: 300 !important;
}

/* =========================
   CONTENEDOR PRINCIPAL FULLSCREEN
========================= */
#wp-chatbot-chat-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* =========================
   OCULTAR ELEMENTOS NO DESEADOS
========================= */
#wp-chatbot-ball,
.wp-chatbot-tab-nav,
#wp-chatbot-header .wp-chatbot-close,
#wp-chatbot-desktop-close {
    display: none !important;
}

/* =========================
   HEADER DEL CHATBOT (AZUL)
========================= */
body #wp-chatbot-chat-container #wp-chatbot-header {
    background: #004481 !important;
    background-color: #004481 !important;
    color: #ffffff !important;
    height: 60px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
    border-bottom: 1px solid #ccc !important;
    box-sizing: border-box !important;
}

#wp-chatbot-header::before {
    content: "DataTime Asistente";
    font-size: 16px !important;
    font-weight: 400 !important;
}

#wp-chatbot-header .wp-chatbot-title {
    display: none !important;
}

/* =========================
   CONTENEDOR INTERNO
========================= */
#wp-chatbot-inner {
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* =========================
   FONDO EN BOARD CONTAINER
========================= */
#wp-chatbot-board-container {
    background-image: url('http://chat.datatime-bi.com/wp-content/uploads/2026/03/datatime-bi_office_background.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
}

#wp-chatbot-board-container::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255,255,255,0.3) !important;
    z-index: 0 !important;
}

#wp-chatbot-board-container > * {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================
   ÁREA DE MENSAJES
========================= */
#wp-chatbot-chat-area {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px 10px 80px !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

/* =========================
   BURBUJAS Y AVATARES
========================= */
.wp-chatbot-msg,
.wp-chatbot-user-msg {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 8px 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Bot */
.wp-chatbot-msg {
    background: #f5f7fa !important;
    color: #1a1a1a !important;
    flex-direction: row !important;
}

/* Usuario */
.wp-chatbot-user-msg {
    background: #1e73be !important;
    color: #ffffff !important;
    flex-direction: row-reverse !important;
    margin-left: auto !important;
}

/* Avatar */
.wp-chatbot-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    flex-shrink: 0 !important;
    z-index: 99 !important;
}

.wp-chatbot-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Avatar bot */
.wp-chatbot-msg .wp-chatbot-avatar img {
    content: url('https://chat.datatime-bi.com/wp-content/uploads/2026/03/NIA.png') !important;
}

/* Texto */
.wp-chatbot-msg > div:not(.wp-chatbot-avatar),
.wp-chatbot-user-msg > div:not(.wp-chatbot-avatar) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* =========================
   INPUT Y BOTÓN ENVIAR
========================= */
#wp-chatbot-editor-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    padding: 15px 20px !important;
    display: flex !important;
    gap: 10px !important;
    border-top: 1px solid #e5e7eb !important;
    z-index: 100000 !important;
    box-sizing: border-box !important;
}

#wp-chatbot-editor {
    flex: 1 !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid #d1d5db !important;
    padding: 0 12px !important;
}

#wp-chatbot-editor:focus {
    border-color: #1e73be !important;
    box-shadow: 0 0 0 2px rgba(30,115,190,0.15) !important;
    outline: none !important;
}

#wp-chatbot-send-message {
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: #1e73be !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    transition: 0.2s !important;
}

#wp-chatbot-send-message:hover {
    background: #155a96 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(30,115,190,0.3) !important;
}

/* =========================
   SCROLL
========================= */
#wp-chatbot-chat-area::-webkit-scrollbar {
    width: 6px !important;
}

#wp-chatbot-chat-area::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 10px !important;
}

/* =========================
   WPADMINBAR — COLOR, FUENTE Y VISIBILIDAD
========================= */
#wpadminbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 32px !important;
    z-index: 300000 !important;
    background: #1e73be !important; /* azul botón Enviar */
    font-family: 'Fira Sans Condensed', sans-serif !important;
}

/* Iconos Dashicons */
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before {
    font-family: "Dashicons" !important;
}

/* Ajustes cuando la adminbar está presente */
body.admin-bar #wp-chatbot-chat-container {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
}

body.admin-bar #wp-chatbot-header {
    top: 32px !important;
}

body.admin-bar #wp-chatbot-inner {
    top: 92px !important; /* 32 + 60 */
}

/* =========================
   EVITAR QUE EL TEXTO SE META BAJO EL AVATAR
========================= */
.wp-chatbot-paragraph {
    padding-left: 15px;
}
.qcld-chatbot-wildcard {
    margin-left: 8px !important;
}

/* El contenedor del mensaje debe ser flex y reservar espacio real para el avatar */
.wp-chatbot-msg,
.wp-chatbot-user-msg {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important; /* separación real */
}

/* El avatar nunca debe comprimirse */
.wp-chatbot-avatar {
    flex-shrink: 0 !important;
}

/* El texto debe ocupar el espacio restante, nunca el del avatar */
.wp-chatbot-msg > *:not(.wp-chatbot-avatar),
.wp-chatbot-user-msg > *:not(.wp-chatbot-avatar) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* =========================
   FORZAR COLOR DE LA BARRA REAL DEL CHATBOT
   (la que aparece en verde)
========================= */

body #wp-chatbot-chat-container .wp-chatbot-header {
    background: #155a96 !important;      /* azul correcto */
    background-color: #155a96 !important; /* refuerzo */
    border-bottom: 1px solid #0f3f6b !important;
    color: #ffffff !important;
}

/* =========================
   CORRECCIÓN ESPACIO EN BLANCO EN MÓVIL
   Anular el height incorrecto impuesto por WPBot
========================= */

@media screen and (max-width: 768px) {
    .wp-chatbot-content {
        height: auto !important; /* elimina el recorte */
        min-height: calc(100vh - 150px) !important; 
        /* 32px adminbar + 60px header chatbot */
    }
}

/* =========================
   ELIMINAR ESPACIO EN BLANCO LATERAL
========================= */

/* Forzar que todo el contenido del chat ocupe el 100% del ancho */
#wp-chatbot-chat-container,
#wp-chatbot-board-container,
.wp-chatbot-content,
#wp-chatbot-chat-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* WPBot añade padding-right en móvil: lo anulamos */
@media screen and (max-width: 768px) {
    .wp-chatbot-content,
    #wp-chatbot-chat-area {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
}

/* Algunos temas añaden overflow oculto que genera huecos */
.wp-chatbot-content {
    overflow-x: hidden !important;
}

@media screen and (max-width: 767px) {
  body div#wp-chatbot-ball-container {
    max-width: 100%;
    margin: 0 auto 0 auto;
  }