/* 🌍 Contenedor Principal */
.helpie-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap; /* Para que se adapte en pantallas pequeñas */
    width: 100%;
    padding-top: 20px;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

/* Contenedor de columnas (escritorio: en fila) */
.helpie-columns {
    display: flex;          /* flex para organizar en fila en desktop */
    flex-wrap: wrap;        /* permite que los elementos salten de línea */
    width: 100%;
    max-width: 1200px;      /* opcional, para no exceder 1200px en escritorio */
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
}

/* Columna Izquierda */
.helpie-left-column {
    order: 0;                    /* Aparece primero */
    flex: 0 0 25%;   /* Ocupa 25% en pantallas grandes */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye los elementos uniformemente */
    align-items: center; /* Centra horizontalmente */
    height: auto; /* Ajusta su altura en función de la columna derecha */
    min-height: 100%; /* Asegura que crezca hasta alcanzar la altura de .helpie-columns */
    padding: 20px 0; /* Espaciado interno opcional */
}

/* Columna Derecha */
.helpie-right-column {
    order: 1;               /* En escritorio, aparece después de la izquierda, antes de la barra */
    flex: 1; /* Ocupa el resto del espacio */
    display: flex;
    flex-direction: column;
    /*justify-content: flex-start;*/
}

/* 📍 Nueva subcolumna para header y botón en Desktop */
.helpie-left-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Mantiene el espaciado proporcional */
    align-items: center;
    width: 100%;
    flex-grow: 1; /* Se ajusta al espacio disponible */
}

/* Imagen principal (Helpie) */
.helpie-main-image {
    max-width: 70%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centrado horizontal */
    
}

/* Encabezado y logo */
.helpie-header {
    text-align: center;
    flex-grow: 1; /* Permite distribución equidistante */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 🖼️ Logo */
.helpie-logo {
    max-width: 70%;
    display: block;
    margin: 0 auto 20px;
}

/* Botón de procesar conocimiento */
.helpie-Process-btn {
    background-color: #F26817;
    color: #fff;
    /*font-weight: bold;*/
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    width: 80%; /* Ajusta si deseas */
    text-align: center;
    align-self: center; /* Centra horizontalmente */
    margin-top: auto; /* Lo empuja hacia abajo */
}

.helpie-Process-btn:hover {
    background-color: #F68615;
    transform: translateY(-2px);
}



/*==================================*/

/***********
 * Contenido de la Columna Derecha
 ***********/
.helpie-training-container {
    background: #63bfe9;
    border-radius: 5px;
    padding-top: 25px;
}

.helpie-add-btn {
    display: block;
    margin-left: auto; /* Empuja el botón hacia la derecha */
    margin-bottom: 10px; /* Espacio entre el botón y la tabla */
    
    background-color: #1f628f;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    width: 15%;
    transition: background 0.3s ease;
}

/* Tabs */
.helpie-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 20px;
}

.helpie-tab {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    background: #fff;
    border: 1px solid #1f628f;
    border-radius: 7px 7px 0 0;
    border-bottom: 3px solid #1f628f;
    transition: background 0.3s ease-in-out;
}

.helpie-tab.active {
    background: #1f628f;
    color: #fff;
    font-weight: bold;
}

.helpie-tab-content {
    width: 100%;
}

.helpie-tab-panel {
    display: none;
    animation: fadeEffect 1s;
}
.helpie-tab-panel.active {
    display: block;
}

/* Textarea y sub-botón de upload */
.textarea-section {
    margin-bottom: 20px;
}

.helpie-textarea {
    width: 100%;
    height: 150px;
    resize: vertical;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 14px;
}

.helpie-upload-btn {
    display: inline-block;
    background-color: #072F4F;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    transition: background 0.3s ease;
}

.helpie-upload-btn:hover {
    background-color: #005f8a;
}

/************
 * Tabla dinamica para manejar los forms
 ************/
 /* Estilos para la tabla de forms */
.helpie-table-container {
    max-height: 400px; /* Ajusta según necesidad */
    overflow-y: auto;
    overflow-x: auto; /* Permite desplazamiento horizontal si es necesario */
}

.entry-content table:not(.variations) {
    border: 1px solid #0F0122;
    margin: 0 0 15px;
    text-align: left;
    width: 100%;
    font-size: 10px;
    background-color: cornsilk;
}

.entry-content thead th, .entry-content tr th {
    color: #555;
    font-weight: 700;
    padding: 9px 5px;
    text-align: center;
    background-color: #1F628E;
    color: #f4f4f4;
}

.entry-content tr td {
    border-top: 1px solid #0F0122;
    padding: 6px 4px;
    text-align: center;
}

#forms-table th {
    padding: 8px 4px; /* Espaciado estándar */
    text-align: center;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

#forms-table th:nth-child(2),  /* Form Code */
#forms-table th:nth-child(7) {  /* Form Preview*/
    width: 8%; /* Ocupa el mínimo espacio posible */
    white-space: nowrap;
}

#forms-table th:nth-child(3) {  /* Form Name */
    width: 18%; /* Ocupa el mínimo espacio posible */
    white-space: nowrap;
}

#forms-table th:nth-child(4) {  /* Form Description*/
    width: 27%; /* Ocupa el mínimo espacio posible */
    white-space: nowrap;
}

#forms-table th:nth-child(6) { /* Category Name */
    width: 18%; /* Ocupa el mínimo espacio posible */
    white-space: nowrap;
}

#forms-table th:nth-child(8) {  /* Upload Date */
    width: 11%; /* Ocupa el mínimo espacio posible */
    white-space: nowrap;
}

#forms-table th:nth-child(9) { /* Status Form */
    width: 6%; /* Ocupa el mínimo espacio posible */
    white-space: nowrap;
}

#forms-table th:nth-child(10) { /* Action */
    width: 4%; /* Ocupa el mínimo espacio posible */
    white-space: nowrap;
}

#forms-table td:nth-child(3), /* Form Name */
#forms-table td:nth-child(4) {  /* Form Description*/
    text-align: left;
}

th {
    cursor: cell;
}

th .sort-icon {
    cursor: pointer;
}

.helpie-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.helpie-table th, .helpie-table td {
    border: 1px solid #0F0122;
    padding: 8px 3px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.helpie-table th {
    background-color: #f2f2f2;
    user-select: none;
}

.helpie-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.helpie-table tbody tr:hover {
    background-color: #e9f5fb;
    cursor: pointer;
}

.sort-icon {
    float: right;
}

.form-icon {
    color: #34A853;
    font-size: 1.5em;
    cursor: pointer;
}

.fa-solid, .fas {
    font-weight: 900;
    font-size: 30px;
}

input:invalid,
textarea:invalid,
select:invalid {
    border: 2px solid #d45757;
}

input:valid,
textarea:valid,
select:valid {
    border: 1px solid #d45757;
}

/* Estilos para los botones de acción */
.tx-row-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    
}

.tx-row-btn.add {
    color: #28a745;
}

.tx-row-btn.delete {
    color: #dc3545;
}

.delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #d9534f; /* Rojo característico para eliminar */
    background: transparent;
    border: none;
    cursor: pointer;
}

.delete-btn:hover {
    color: #c9302c; /* Rojo más oscuro al pasar el mouse */
}

/* Estilos para la ventana modal */
#add-form-modal {
    display: none; /* Ocultar el modal al inicio */
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: #b2cbf3;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 500px;
}

/* Estilo del encabezado del modal */
.modal-header {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* Cuerpo del modal */
.modal-body {
    display: flex;
    flex-direction: column;
}

.modal-body input,
.modal-body textarea,
.modal-body select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Pie del modal */
.modal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.modal-footer button {
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-btn {
    background: #0073aa;
    color: #fff;
    padding: 10px 15px;
    right: 15px;
}

.cancel-btn {
    background: #ccc;
    padding: 10px 40px;
}

/* Cerrar modal */
.close-modal {
    position: absolute;
    /*top: 10px;*/
    /*font-size: 20px;*/
    cursor: pointer;
}

/* Alinear Form Code y Form Name en la misma línea */
.form-row {
    display: flex;
    gap: 15px; /* Espacio entre los dos campos */
}

/* Form Code al 30% y Form Name al 70% */
.form-code {
    flex: 30%;
}

.form-name {
    flex: 70%;
}

/* Ajuste para los inputs dentro de los contenedores */
.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.upload-input {
    width: 100%;
    height: 40px; /* altura uniforme */
    border-radius: 4px;
    padding: 8px 10px !important;
    border: 1px solid #072f4f !important;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

/* Estilos para dispositivos móviles */
@media only screen and (max-width: 768px) {
    .helpie-container {
        display: flex;
        flex-direction: column-reverse; /* Reversa el orden de las columnas en dispositivos móviles */
    }

    .helpie-columns {
        flex: 1;
    }

    .helpie-left-column, .helpie-right-column {
        width: 100%;
        padding: 10px;
    }
}

 /*************************************/

/***********
 * Barra de Progreso
 ***********/
.progress-container {
    /* Para escritorio, la barra estará 'después' de las dos columnas 
     pero en nuestra fila flex la "forzamos" a ocupar 100% 
     y caer debajo de la primera fila. */
    order: 2;             /* Aparece después de la columna derecha (que será order: 1). Ver más abajo */
    flex: 0 0 100%;       /* Fuerza a ocupar una "línea" completa (siguiente fila). */
    margin-top: -10px;     /* Separación vertical */
    background-color: #d5e5f0;
    border-radius: 7px;
    border: 1px solid #8757FB;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    /*height: 20px;*/
    overflow: hidden;
    display: block;
    position: relative;
    
    /*position: relative;*/
    /*max-width: 100%; /* Ocupará el ancho total */
    /*margin: 20px 0 0 0; /* Margen superior */
}

.progress-bar {
    height: 20px;
    text-align: center;
    color: white;
    background: linear-gradient(90deg, #5FD5E6, #8561FC);
    transition: width 0.1s ease-in-out;
    width: 0;
}

.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #333;
    /*font-weight: bold;*/
}

/* 📱 Responsive */

@media (max-width: 768px) {
    .helpie-container {
        align-items: center; /* Asegura que todo se alinee bien en móviles */
    }
    
    h3 {
        font-size: 16px;
    }
    
    .helpie-tabs {
        flex-direction: column;
    }
    
    .helpie-columns {
        flex-direction: column; /* Apila las columnas */
        align-items: center;
    }
    
    .helpie-left-column {
        /* Cambiamos a horizontal */
        flex-direction: row; /* Cambia de vertical a horizontal */
        justify-content: space-between; /* Separa los elementos */
        align-items: center; /* Alinea verticalmente */
        width: 100%;
        max-width: 600px;
        flex-wrap: wrap; /* Permite que los elementos se acomoden */
        padding: 10px 0 0 0;
    }
    
    /* Columna Derecha al final */
    .helpie-right-column {
        order: 2;       /* Tercera */
        width: 90%;
        margin-bottom: 20px;
    }
    
    /* Se coloca la barra de progreso entre las columnas */
    .progress-container {
        order: 1; /* La movemos entre las columnas */
        /*display: block; /* Asegurar que sea visible */
        width: 91%; /* Ajuste para móviles */
        margin-top: -40px;
    }

    
    /* Ajusta las dimensiones para que quepan mejor en horizontal */
    .helpie-main-image {
        flex: 0 0 auto; /* No se estira */
        max-width: 30%; /* Para que no ocupe demasiado espacio a lo ancho */
        margin: 0 14px 30px; /* Espaciado lateral */
    }
    
    .helpie-left-content {
        display: flex;
        flex-direction: column; /* Asegura que el header quede sobre el botón */
        justify-content: center;
        align-items: center;
        flex: 1;
        text-align: center;
        /*gap: 10px; /* Espaciado entre header y botón */
        padding-bottom: 40px;
    }
    
    /* 📌 Encabezado centrado encima del botón */
    .helpie-header {
        width: 70%; /* Para centrar el contenido */
    }

    .helpie-logo {
        max-width: 80%;
        margin: 5px 10px;
    }
    
    /* 📌 Botón alineado a la derecha */
    .helpie-Process-btn {
        align-self: flex-end; /* Alinea el botón a la derecha */
        margin-right: 20px; /* Espaciado desde el borde derecho */
        height: 30px;
        padding: 2px;
    }

    .helpie-tabs li {
        margin-bottom: 5px;
    }

    .helpie-col-images {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .helpie-tabs {
        flex-wrap: wrap;
    }

    .helpie-textarea {
        height: 120px;
    }

    .helpie-Process-btn {
        font-size: 10px;
    }

    .progress-text {
        font-size: 12px;
    }
}

/* ✨ Animación Fade */
@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}



/************************
ASSISTANT
************************/

/* 🎬 Video de Fondo */
.helpie-background {
    display: inline-block;
    width: auto;
    height: 100%;
    overflow: hidden;
}

.helpie-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
    background: #000;
}

/* 🔥 Safari Fix: Ajusta el video en Safari */
@supports (-webkit-touch-callout: none) {
    .helpie-video {
        position: absolute;
    }
}

/* 📂 Sidebar */
.helpie-sidebar {
    width: 25%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    overflow-y: auto;
    /*display: flex;*/
    flex-direction: column;
    justify-content: space-between; /* Distribuye el contenido */
    min-height: 100%;
    position: relative; /* Mantiene la imagen en el contenedor */
    transition: all 0.3s ease-in-out;
}


/* General Styles */
.helpie-world-container {
    position: relative;
    height: 78vh; /* Altura base */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #000;
}

/* 📌 Ajuste cuando el header #main-header está presente */
body.has-main-header .helpie-world-container {
    height: calc(100vh - 150px); /* Resta la altura del header en desktop */
}

/* 📌 Ajuste cuando NO hay header */
body.no-main-header .helpie-world-container {
    height: 91vh;
}

/* 📌 Responsividad en Tabletas (768px - 1024px) */
@media (max-width: 1024px) {
    body.has-main-header .helpie-world-container {
        height: calc(100vh - 150px); /* Ajuste si hay header */
    }
}

/* 📌 Responsividad en Teléfonos (hasta 767px) */
@media (max-width: 767px) {
    body.has-main-header .helpie-world-container {
        height: calc(100vh - 130px); /* Ajuste si hay header en móviles */
    }
}


.helpie-content {
    display: flex;
    height: 100%;
    z-index: 2;
}

/* 📥 Chat */
.helpie-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(99, 191, 233, 0.8);
    padding: 10px 10px 5px 10px;
    overflow-y: auto;
    position: relative;
}

/* 🌟 Degradado en la parte superior e inferior para un efecto más limpio */
.helpie-chat-container::before,
.helpie-chat-container::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 1;
    pointer-events: none;
}

.helpie-chat-container::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(15, 1, 34, 0.9), rgba(255, 255, 255, 0));
}

.helpie-chat-container::after {
    /*bottom: 0;
    background: linear-gradient(to top, rgba(15, 1, 34, 0.9), rgba(255, 255, 255, 0));*/
}

/* 📜 Historial del Chat */
#helpie-chat-history {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 70vh;
    scroll-behavior: smooth; 
    scrollbar-width: thin; /* Firefox */
    -webkit-overflow-scrolling: touch; /* iOS */
}

.helpie-chat-history {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth; 
}

/* Logo */
.business-logo {
    display: block;
    width: 40%;
    height: auto;
    margin: 0 0 0 0;
}


.helpie-sidebar-logo {
    /*margin: -65px 0 0 -30px;
    width: 100%;
    height: auto;
    text-align: right;
    position: relative;
    display: flex;*/
    
    margin: 0 0 0 0;
    /* width: 20%; */
    /*height: 8px;*/
    position: relative;
    display: flex;
    justify-content: right;
    align-items: center;
}

.helpie-container-logo {
    margin: 0;
    position: absolute;
    transform: translate(50%, -50%);
    max-width: 30%;
}

.helpie-title {
    background: #0f0122; 
    height:60px;
}

.helpie-text-title {
    padding: 15px 10px;
}

.helpie-text-title h1{
    font-size: 28px;
    color: white;
    font-weight:700;
}

/* 💬 Mensajes */
.chat-bubble {
    margin: 3px 0;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 85%;
}

/* Compatibilidad con Safari y Edge */
.chat-bubble {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.user-bubble {
    background-color: #e9849b;
    color: white;
    border-radius: 15px 15px 0 15px;
    align-self: flex-end;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.helpie-bubble {
    background-color: #637EB9;
    color: white;
    border-radius: 15px 15px 15px 0;
    align-self: flex-start;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* 📩 Input */
.helpie-chat-input {
    display: flex;
    gap: 10px;
    position: relative;
    padding: 2px;
    /*background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); /* Degradado superior */
}

/* 📝 Contenedor de input y botón */
.input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

/* 📝 Caja de texto */
#helpie-input {
    flex: 1;
    padding: 12px 50px 12px 10px; /* Espacio a la derecha para el botón */
    border-radius: 12px;
    border: 1px solid #ccc;
    font-size: 14px;
    width: 100%;
    resize: none;
}

/*#helpie-send {
    padding: 10px 20px;
    background: #2196f3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}*/

/* ✈️ Botón de envío como ícono */
#helpie-send {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #2196f3;
    font-size: 18px;
}

#helpie-send:hover {
    background: #1976d2;
}

/* 🤖 Avatar de Helpie */
.helpie-avatar {
    position: absolute;
    bottom: 10%;
    right: 1%;
    z-index: 3;
}

.helpie-avatar-img {
    width: 90px;
    animation: float 3s ease-in-out infinite;
}


/**********************************/
/* MODAL CONTAINER                */
/**********************************/
/* Estilos generales del modal */
.modal-container {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

/* Contenedor del modal */
.modal-content {
    background: #0F0122;
    width: 500px;
    max-width: 500px; /* Ajusta el tamaño máximo en pantallas grandes */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(10, 10, 10, 0.7);
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
    
    /* Centrar usando transform */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 📌 Forzar el formulario de Login a una sola columna */
#authModal .um.um-login {
    display: block !important;
}

#authModal .um.um-login .um-row {
    flex-direction: column !important;
    display: block !important;
}

/* 📌 Mantener el Registro en dos columnas */
#authModal .um.um-register .um-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

/* Ajuste para alinear correctamente los inputs */
#authModal .um.um-login .um-field,
#authModal .um.um-login .um-field-area {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Asegura que los shortcodes de WordPress sean visibles */
#modal-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 🔹 Restaura la alineación y estructura de los formularios de Ultimate Member dentro del modal */
#authModal .um {
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    display: block !important;
}

/* 🔹 Mantiene los campos de formulario con el tamaño adecuado */
#authModal .um-field {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* 🔹 Asegura que los inputs ocupen el ancho correcto */
#authModal .um-field input,
#authModal .um-field select,
#authModal .um-field textarea {
    width: 100% !important;
    max-width: 100% !important;
}

/* 🔹 Botones de Ultimate Member dentro del modal */
#authModal .um-button {
    width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
    margin-top: 10px !important;
    font-size: 16px !important;
}

/* 🔹 Corrección de columnas (Si el formulario tiene una estructura de 2 columnas) */
#authModal .um-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

#authModal .um-half {
    width: 48% !important;
}

/* 🔹 FORMULARIO DE REGISTRO (2 columnas) */
#authModal .um.register-form .um-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

#authModal .um.register-form .um-half {
    width: 48% !important;
}

/* 🔹 FORMULARIO DE INICIO DE SESIÓN (1 columna) */
#authModal .um.login-form .um-row {
    display: block !important;
}

#authModal .um.login-form .um-half {
    width: 100% !important;
}

/* 🔹 Restaura la opacidad del formulario dentro del modal */
#authModal .um:not(.um-admin) {
    opacity: 1 !important;
}

/* Asegurar que el botón de Login/Register siempre esté activable */
#authModal .um-button.um-disabled {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.um-field-error-active {
    border: 1px solid red !important;
}

.um-field-error {
    color: red;
    font-size: 13px;
    margin-top: 5px;
}

/* Animación para hacer la apertura del modal más suave */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Botón para cerrar el modal */
.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

/* Asegurar que el formulario de login/registro dentro del modal conserve el diseño de dos columnas */
.modal-content .um-field {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-content .um-field .um-half {
    width: 48%; /* Mantener dos columnas */
    display: inline-block;
    vertical-align: top;
}

/* Asegurar alineación correcta dentro del modal */
.modal-content form.um-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-width: 350px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 100%;
        max-width: 320px;
        padding: 10px;
    }
}


/**********************************/

/* Animación con prefijos */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@-webkit-keyframes float {
    0%, 100% { -webkit-transform: translateY(0); }
    50% { -webkit-transform: translateY(-10px); }
}

/* El botón .helpie-sidebar-toggle por defecto, en desktop no se muestra */
.helpie-sidebar-toggle {
    display: none; /* Oculto en pantallas grandes */
    position: absolute;
    top: 15px;
    right: 15px;
    background: #1f628f;
    color: white;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 999; /* Asegúrate de que quede por encima de la sidebar */
}


/* 📱 Responsividad */

/* Ajustes Responsivos para Tablets y Smartphones */

@media only screen and (max-width: 768px) {
    
    .helpie-world-container {
        height: 93vh;
    }
    
    .helpie-training-container {
        background: #63bfe9;
        border-radius: 5px;
        padding-top: 1px;
    }
    
    .helpie-sidebar-toggle {
        position: absolute;
        display: block;
        top: 15px;
        right: 15px;
        background: #1f628f;
        color: white;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .helpie-content {
        height: 100%;
    }

    .helpie-sidebar {
        width: 100%;
        height: 100%;
        position: absolute;
        padding: 20px;
        top: 0;
        left: -100%;
        flex-direction: column;
        transition: left 0.3s ease-in-out;
        z-index: 998; /* Debajo del toggle, pero sobre el fondo */
    }
    
    /* Logo */
    .business-logo {
        /*display: block;*/
        width: 50%;
        height: auto;
        margin: 0 0 0 0;
    }


    .helpie-sidebar-logo {
        margin: -45px 0 0 -10px;
        width: 100%;
        height: auto;
        text-align: right;
    }

    .helpie-container-logo {
        margin: 0;
        max-width: 30%;
        position: relative;
        /*transform: none;*/
    }

    .helpie-text-title {
        padding: 5px 10px;
    }
        
    
    .helpie-text-title h1{
        font-weight:700;
        font-size: 14px; 
        color: white;
        padding-top: 5px;
        margin-left: 10px;
    }
    
    .helpie-sidebar.show {
        left: 0;
    }
    
    .helpie-chat-container {
        height: 100%;
    }

    .helpie-avatar-img {
        width: 50px;
        position: relative;
        top: -400px;
        right: 5px;
    }
    
    .helpie-avatar {
        position: absolute;
        bottom: -50%;
        right: 1%;
        z-index: 3;
    }

    .chat-link-button {
        padding: 1px 12px;
        font-size: 12px;
    }

    .chat-link-button i {
        font-size: 12px;
    }
    
    .helpie-chat-input {
        flex-direction: column;
        padding: 2px;
    }

    #helpie-input {
        font-size: 16px;
        padding: 12px 50px 12px 10px;
        border-radius: 8px;
    }

    #helpie-send {
        font-size: 20px;
    }
    
    .helpie-chat-container::before,
    .helpie-chat-container::after {
        height: 15px; /* Reducir la intensidad del degradado en móviles */
    }
}

/******** 480px ************/

@media (max-width: 480px) {
    .helpie-avatar-img {
        width: 50px;
        position: relative;
        top: -400px;
        left: 5px;
    }
    
    .helpie-text-title h1 {
        font-weight:700;
        font-size: 14px; 
        color: white;
        padding-top: 5px;
        margin-left: 10px;
    }

    .chat-bubble {
        font-size: 12px;
        padding: 4px 7px;
        border-radius:5px;
    }

    #helpie-chat-history {
        max-height: 50vh;
    }

    .helpie-chat-input {
        flex-direction: column;
    }

    #helpie-input {
        font-size: 14px;
        padding: 8px;
    }

    #helpie-send {
        font-size: 14px;
        padding: 8px;
    }
}

/*Styles for Links */
.chat-link-container {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 4px 0;
}

.chat-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4A90E2;
    color: white !important;
    text-decoration: none !important;
    padding: 2px 10px;
    border-radius: 7px;
    font-weight: 700;
    font-size: 12px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    transition: all 0.3s ease;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.chat-link-button:hover {
    background-color: #FF8C00;
    transform: translateY(-2px);
}

.chat-link-button i {
    font-size: 12px;
    margin-right: 6px; /* Espaciado ajustado */
}

.chat-link-button span {
    display: inline-flex;
    align-items: center; /* Centrado vertical */
}



@media only screen and (max-width: 480px) {
    .chat-link-button {
        padding: 6px 10px;
        font-size: 11px;
    }

    .chat-link-button i {
        font-size: 11px;
    }
}