/* ESTILOS PARA CHATBOT CON BOTONES */
#chatbotInput, #chatbotSend {
    display: none !important;
}

/* Botones de categoría */
.botones-categoria {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 15px 0;
}

.boton-categoria {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11);
    display: flex;
    align-items: center;
    gap: 10px;
}

.boton-categoria:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Botones de problema */
.botones-problema {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
}

.boton-problema {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 5px rgba(50, 50, 93, 0.1);
}

.boton-problema:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(50, 50, 93, 0.15);
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
}

/* Botones de opción/respuesta */
.botones-opcion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
}

.boton-respuesta {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #333;
    border: 2px solid #a8edea;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.boton-respuesta:hover {
    background: linear-gradient(135deg, #fed6e3 0%, #a8edea 100%);
    border-color: #fed6e3;
    transform: translateY(-2px);
}

/* Botones de acción */
.botones-accion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.boton-accion {
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.boton-accion.principal {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11);
}

.boton-accion.principal:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
    background: linear-gradient(135deg, #38f9d7 0%, #43e97b 100%);
}

.boton-accion.secundario {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11);
}

.boton-accion.secundario:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
    background: linear-gradient(135deg, #fee140 0%, #fa709a 100%);
}

/* Botón volver */
.boton-volver {
    background: #f8f9fa;
    color: #6c757d;
    border: 2px solid #dee2e6;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: 10px;
}

.boton-volver:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

/* Progreso */
.progreso {
    background: #e3f2fd;
    color: #1976d2;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 10px;
}

/* Mensaje de diagnóstico */
.diagnostico {
    background: #fff8e1;
    border-left: 4px solid #ffb300;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
}

/* Botones especiales */
.botones-especiales {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.boton-especial {
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}